fix: flickering page when renaming

CHANGELOG.md

@@ -142,6 +142,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
 - [#185](https://github.com/alleslabs/celatone-frontend/pull/185) Fix sentry in next.config.js
 - [#183](https://github.com/alleslabs/celatone-frontend/pull/183) Fix build failed because sentry env
 - [#175](https://github.com/alleslabs/celatone-frontend/pull/175) Fix css related issue and tag selection input

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

@@ -58,9 +58,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

@@ -72,7 +72,10 @@ export const InstantiateOffChainForm = observer(
           data.tags,
           data.lists
         );
-        navigate({ pathname: "/contract-list/instantiated-by-me" });
+        navigate({
+          pathname: "/contract-list/[slug]",
+          query: { slug: "instantiated-by-me" },
+        });
       })();
     };
 
@@ -109,7 +112,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: "instantiated-by-me" },
+                })
               }
             >
               Skip