Preserve view transitions through navigation redirects (#11925)

remix-run · Aug 29, 2024 · 766f07d · 766f07d
1 parent 5651176
commit 766f07d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 7 deletions.
diff --git a/.changeset/hot-insects-rescue.md b/.changeset/hot-insects-rescue.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Preserve view transition through redirects
diff --git a/packages/router/__tests__/view-transition-test.ts b/packages/router/__tests__/view-transition-test.ts
@@ -1,5 +1,6 @@
 import { IDLE_NAVIGATION } from "../router";
 import { cleanup, setup } from "./utils/data-router-setup";
+import { createFormData } from "./utils/utils";
 
 describe("view transitions", () => {
   // Detect any failures inside the router navigate code
@@ -136,4 +137,39 @@ describe("view transitions", () => {
     unsubscribe();
     t.router.dispose();
   });
+
+  it("preserves pending view transitions through redirects", async () => {
+    let t = setup({
+      routes: [
+        { path: "/" },
+        { id: "a", path: "/a", action: true },
+        { path: "/b" },
+      ],
+    });
+    let spy = jest.fn();
+    let unsubscribe = t.router.subscribe(spy);
+
+    let A = await t.navigate("/a", {
+      formMethod: "post",
+      formData: createFormData({}),
+      unstable_viewTransition: true,
+    });
+
+    await A.actions.a.redirect("/b");
+    expect(spy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        navigation: IDLE_NAVIGATION,
+        location: expect.objectContaining({ pathname: "/b" }),
+      }),
+      expect.objectContaining({
+        unstable_viewTransitionOpts: {
+          currentLocation: expect.objectContaining({ pathname: "/" }),
+          nextLocation: expect.objectContaining({ pathname: "/b" }),
+        },
+      })
+    );
+
+    unsubscribe();
+    t.router.dispose();
+  });
 });
diff --git a/packages/router/router.ts b/packages/router/router.ts
@@ -1784,7 +1784,7 @@ export function createRouter(init: RouterInit): Router {
         );
         replace = location === state.location.pathname + state.location.search;
       }
-      await startRedirectNavigation(request, result, {
+      await startRedirectNavigation(request, result, true, {
         submission,
         replace,
       });
@@ -2037,7 +2037,7 @@ export function createRouter(init: RouterInit): Router {
           revalidatingFetchers[redirect.idx - matchesToLoad.length].key;
         fetchRedirectIds.add(fetcherKey);
       }
-      await startRedirectNavigation(request, redirect.result, {
+      await startRedirectNavigation(request, redirect.result, true, {
         replace,
       });
       return { shortCircuited: true };
@@ -2333,7 +2333,7 @@ export function createRouter(init: RouterInit): Router {
         } else {
           fetchRedirectIds.add(key);
           updateFetcherState(key, getLoadingFetcher(submission));
-          return startRedirectNavigation(fetchRequest, actionResult, {
+          return startRedirectNavigation(fetchRequest, actionResult, false, {
             fetcherSubmission: submission,
           });
         }
@@ -2454,7 +2454,11 @@ export function createRouter(init: RouterInit): Router {
           revalidatingFetchers[redirect.idx - matchesToLoad.length].key;
         fetchRedirectIds.add(fetcherKey);
       }
-      return startRedirectNavigation(revalidationRequest, redirect.result);
+      return startRedirectNavigation(
+        revalidationRequest,
+        redirect.result,
+        false
+      );
     }
 
     // Process and commit output from loaders
@@ -2615,7 +2619,7 @@ export function createRouter(init: RouterInit): Router {
         return;
       } else {
         fetchRedirectIds.add(key);
-        await startRedirectNavigation(fetchRequest, result);
+        await startRedirectNavigation(fetchRequest, result, false);
         return;
       }
     }
@@ -2654,6 +2658,7 @@ export function createRouter(init: RouterInit): Router {
   async function startRedirectNavigation(
     request: Request,
     redirect: RedirectResult,
+    isNavigation: boolean,
     {
       submission,
       fetcherSubmission,
@@ -2740,8 +2745,11 @@ export function createRouter(init: RouterInit): Router {
           ...activeSubmission,
           formAction: location,
         },
-        // Preserve this flag across redirects
+        // Preserve these flags across redirects
         preventScrollReset: pendingPreventScrollReset,
+        enableViewTransition: isNavigation
+          ? pendingViewTransitionEnabled
+          : undefined,
       });
     } else {
       // If we have a navigation submission, we will preserve it through the
@@ -2754,8 +2762,11 @@ export function createRouter(init: RouterInit): Router {
         overrideNavigation,
         // Send fetcher submissions through for shouldRevalidate
         fetcherSubmission,
-        // Preserve this flag across redirects
+        // Preserve these flags across redirects
         preventScrollReset: pendingPreventScrollReset,
+        enableViewTransition: isNavigation
+          ? pendingViewTransitionEnabled
+          : undefined,
       });
     }
   }