Fix fetcher state stuck on loading if a loader redirects (#12873)

Author: gatzjames

.changeset/curvy-lobsters-accept.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix bug where a submitting `fetcher` would get stuck in a `loading` state if a revalidating `loader` redirected

contributors.yml

@@ -111,6 +111,7 @@
 - fyzhu
 - fz6m
 - gaspard
+- gatzjames
 - gavriguy
 - Geist5000
 - gesposito

packages/react-router/__tests__/router/fetchers-test.ts

@@ -841,6 +841,43 @@ describe("fetchers", () => {
       expect(t.router.state.location.pathname).toBe("/");
       expect(t.router.state.location.key).toBe(key);
     });
+
+    test("handles loader redirects after a fetcher submission", async () => {
+      let t = initializeTest();
+
+      let A = await t.navigate("/foo");
+      await A.loaders.foo.resolve("FOO");
+      expect(t.router.state).toMatchObject({
+        location: { pathname: "/foo" },
+        navigation: { state: "idle" },
+        loaderData: { root: "ROOT", foo: "FOO" },
+      });
+
+      let key = "key";
+      let B = await t.fetch("/bar", key, {
+        formMethod: "post",
+        formData: createFormData({}),
+      });
+      await B.actions.bar.resolve("ACTION");
+      expect(t.fetchers[key]).toMatchObject({
+        state: "loading",
+        data: "ACTION",
+      });
+      await B.loaders.root.resolve("ROOT*");
+
+      let C = await B.loaders.foo.redirect("/");
+      await C.loaders.root.resolve("ROOT**");
+      await C.loaders.index.resolve("INDEX*");
+      expect(t.router.state).toMatchObject({
+        location: { pathname: "/" },
+        navigation: { state: "idle" },
+        loaderData: { root: "ROOT**", index: "INDEX*" },
+      });
+      expect(t.fetchers[key]).toMatchObject({
+        state: "idle",
+        data: "ACTION",
+      });
+    });
   });
 
   describe("fetcher resubmissions/re-gets", () => {

packages/react-router/lib/router/router.ts

@@ -2494,6 +2494,13 @@ export function createRouter(init: RouterInit): Router {
     fetchControllers.delete(key);
     revalidatingFetchers.forEach((r) => fetchControllers.delete(r.key));
 
+    // Since we let revalidations complete even if the submitting fetcher was
+    // deleted, only put it back to idle if it hasn't been deleted
+    if (state.fetchers.has(key)) {
+      let doneFetcher = getDoneFetcher(actionResult.data);
+      state.fetchers.set(key, doneFetcher);
+    }
+
     let redirect = findRedirect(loaderResults);
     if (redirect) {
       return startRedirectNavigation(
@@ -2528,13 +2535,6 @@ export function createRouter(init: RouterInit): Router {
       fetcherResults
     );
 
-    // Since we let revalidations complete even if the submitting fetcher was
-    // deleted, only put it back to idle if it hasn't been deleted
-    if (state.fetchers.has(key)) {
-      let doneFetcher = getDoneFetcher(actionResult.data);
-      state.fetchers.set(key, doneFetcher);
-    }
-
     abortStaleFetchLoads(loadId);
 
     // If we are currently in a navigation loading state and this fetcher is