fix: flickering page when renaming

CHANGELOG.md

@@ -144,6 +144,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#187](https://github.com/alleslabs/celatone-frontend/pull/187) Fix renaming list flicker to the all lists for a second
 - [#184](https://github.com/alleslabs/celatone-frontend/pull/184) Fix next seo to use default seo
 - [#186](https://github.com/alleslabs/celatone-frontend/pull/186) Fix logo navigation
 - [#185](https://github.com/alleslabs/celatone-frontend/pull/185) Fix sentry in next.config.js

src/lib/components/modal/list/EditListName.tsx

@@ -80,7 +80,8 @@ export function EditListNameModal({
         handleSave();
         if (reroute)
           navigate({
-            pathname: `/contract-list/${formatSlugName(listName)}`,
+            pathname: "/contract-list/[slug]",
+            query: { slug: formatSlugName(listName) },
             replace: true,
           });
       }}

src/lib/pages/contract-list/index.tsx

@@ -15,7 +15,7 @@ const AllContractListsPage = observer(() => {
   const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()];
 
   const handleListSelect = (slug: string) => {
-    navigate({ pathname: `/contract-list/${slug}` });
+    navigate({ pathname: "/contract-list/[slug]", query: { slug } });
   };
 
   return (

src/lib/pages/contract-list/slug.tsx

@@ -59,9 +59,12 @@ const ContractsByList = observer(() => {
     : getContractLists().find((item) => item.slug === listSlug);
 
   useEffect(() => {
-    if (isHydrated && contractListInfo === undefined) {
-      navigate({ pathname: "/contract-list" });
-    }
+    // TODO: find a better approach?
+    const timeoutId = setTimeout(() => {
+      if (isHydrated && contractListInfo === undefined)
+        navigate({ pathname: "/contract-list" });
+    }, 100);
+    return () => clearTimeout(timeoutId);
   }, [contractListInfo, isHydrated, navigate]);
 
   if (!contractListInfo) return null;

src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx

@@ -6,9 +6,11 @@ import { useForm } from "react-hook-form";
 import { useInternalNavigate } from "lib/app-provider";
 import { OffChainForm } from "lib/components/OffChainForm";
 import type { OffchainDetail } from "lib/components/OffChainForm";
+import { INSTANTIATED_LIST_NAME } from "lib/data";
 import { useContractStore } from "lib/hooks";
 import { useUserKey } from "lib/hooks/useUserKey";
 import type { ContractAddr, HumanAddr, LVPair } from "lib/types";
+import { formatSlugName } from "lib/utils";
 
 interface InstantiateOffChainFormProps {
   title?: string;
@@ -30,6 +32,7 @@ export const InstantiateOffChainForm = observer(
     const navigate = useInternalNavigate();
     const { updateContractLocalInfo } = useContractStore();
     const userKey = useUserKey();
+    const instantiatedListSlug = formatSlugName(INSTANTIATED_LIST_NAME);
 
     const {
       control,
@@ -72,7 +75,10 @@ export const InstantiateOffChainForm = observer(
           data.tags,
           data.lists
         );
-        navigate({ pathname: "/contract-list/instantiated-by-me" });
+        navigate({
+          pathname: "/contract-list/[slug]",
+          query: { slug: instantiatedListSlug },
+        });
       })();
     };
 
@@ -109,7 +115,10 @@ export const InstantiateOffChainForm = observer(
               w="128px"
               variant="outline-gray"
               onClick={() =>
-                navigate({ pathname: "/contract-list/instantiated-by-me" })
+                navigate({
+                  pathname: "/contract-list/[slug]",
+                  query: { slug: instantiatedListSlug },
+                })
               }
             >
               Skip