feat: make client router support view transitions

dai-shi · Feb 3, 2025 · 11d5c27 · 11d5c27
1 parent e1190b3
commit 11d5c27
Showing 1 changed file with 23 additions and 12 deletions.
diff --git a/packages/waku/src/router/client.ts b/packages/waku/src/router/client.ts
@@ -349,17 +349,25 @@ const InnerRouter = ({
   const changeRoute: ChangeRoute = useCallback(
     (route, options) => {
       const { skipRefetch } = options || {};
-      startTransition(() => {
-        if (!staticPathSet.has(route.path) && !skipRefetch) {
-          const rscPath = encodeRoutePath(route.path);
-          const rscParams = createRscParams(route.query);
-          refetch(rscPath, rscParams);
-        }
-        if (options.shouldScroll) {
-          handleScroll();
-        }
-        setRoute(route);
-      });
+      const performChange = () => {
+        startTransition(() => {
+          if (!staticPathSet.has(route.path) && !skipRefetch) {
+            const rscPath = encodeRoutePath(route.path);
+            const rscParams = createRscParams(route.query);
+            refetch(rscPath, rscParams);
+          }
+          if (options.shouldScroll) {
+            handleScroll();
+          }
+          setRoute(route);
+        });
+      };
+
+      if ('startViewTransition' in document && !skipRefetch) {
+        document.startViewTransition(performChange);
+      } else {
+        performChange();
+      }
     },
     [refetch, staticPathSet],
   );
@@ -403,8 +411,11 @@ const InnerRouter = ({
           '',
           url,
         );
+        changeRoute(parseRoute(url), {
+          skipRefetch: true,
+          shouldScroll: false,
+        });
       }
-      changeRoute(parseRoute(url), { skipRefetch: true, shouldScroll: false });
     };
     locationListeners.add(callback);
     return () => {