fix(router-core): trigger abort signal when navigating away after pendingMs (#5777)

* fix(router): trigger loader abort signal when navigating away after pendingMs

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: ramybenaroya

packages/react-router/tests/loaders.test.tsx

@@ -729,3 +729,71 @@ test('clears pendingTimeout when match resolves', async () => {
   expect(nestedPendingComponentOnMountMock).not.toHaveBeenCalled()
   expect(fooPendingComponentOnMountMock).not.toHaveBeenCalled()
 })
+
+test('cancelMatches after pending timeout', async () => {
+  function getPendingComponent(onMount: () => void) {
+    const PendingComponent = () => {
+      useEffect(() => {
+        onMount()
+      }, [])
+
+      return <div>Pending...</div>
+    }
+    return PendingComponent
+  }
+  const onAbortMock = vi.fn()
+  const fooPendingComponentOnMountMock = vi.fn()
+  const rootRoute = createRootRoute({
+    component: () => (
+      <div>
+        <h1>Index page</h1>
+        <Link data-testid="link-to-foo" to="/foo">
+          link to foo
+        </Link>
+        <Link data-testid="link-to-bar" to="/bar">
+          link to bar
+        </Link>
+        <Outlet />
+      </div>
+    ),
+  })
+  const fooRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/foo',
+    pendingMs: WAIT_TIME * 20,
+    loader: async ({ abortController }) => {
+      await new Promise<void>((resolve) => {
+        const timer = setTimeout(() => {
+          resolve()
+        }, WAIT_TIME * 40)
+        abortController.signal.addEventListener('abort', () => {
+          onAbortMock()
+          clearTimeout(timer)
+          resolve()
+        })
+      })
+    },
+    pendingComponent: getPendingComponent(fooPendingComponentOnMountMock),
+    component: () => <div>Foo page</div>,
+  })
+  const barRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/bar',
+    component: () => <div>Bar page</div>,
+  })
+  const routeTree = rootRoute.addChildren([fooRoute, barRoute])
+  const router = createRouter({ routeTree, history })
+  render(<RouterProvider router={router} />)
+  await act(() => router.latestLoadPromise)
+  const fooLink = await screen.findByTestId('link-to-foo')
+  fireEvent.click(fooLink)
+  await sleep(WAIT_TIME * 30)
+  const pendingElement = await screen.findByText('Pending...')
+  expect(pendingElement).toBeInTheDocument()
+  const barLink = await screen.findByTestId('link-to-bar')
+  fireEvent.click(barLink)
+  const barElement = await screen.findByText('Bar page')
+  expect(barElement).toBeInTheDocument()
+  expect(fooPendingComponentOnMountMock).toHaveBeenCalled()
+  expect(onAbortMock).toHaveBeenCalled()
+})

packages/router-core/src/router.ts

@@ -1563,7 +1563,18 @@ export class RouterCore<
   }
 
   cancelMatches = () => {
-    this.state.pendingMatches?.forEach((match) => {
+    const currentPendingMatches = this.state.matches.filter(
+      (match) => match.status === 'pending',
+    )
+    const currentLoadingMatches = this.state.matches.filter(
+      (match) => match.isFetching === 'loader',
+    )
+    const matchesToCancelArray = new Set([
+      ...(this.state.pendingMatches ?? []),
+      ...currentPendingMatches,
+      ...currentLoadingMatches,
+    ])
+    matchesToCancelArray.forEach((match) => {
       this.cancelMatch(match.id)
     })
   }

packages/router-core/tests/load.test.ts

@@ -460,6 +460,55 @@ test('exec on stay (beforeLoad & loader)', async () => {
   expect(layoutBeforeLoadResolved).toBe(true)
 })
 
+test('cancelMatches after pending timeout', async () => {
+  const WAIT_TIME = 5
+  const onAbortMock = vi.fn()
+  const rootRoute = new BaseRootRoute({})
+  const fooRoute = new BaseRoute({
+    getParentRoute: () => rootRoute,
+    path: '/foo',
+    pendingMs: WAIT_TIME * 20,
+    loader: async ({ abortController }) => {
+      await new Promise<void>((resolve) => {
+        const timer = setTimeout(() => {
+          resolve()
+        }, WAIT_TIME * 40)
+        abortController.signal.addEventListener('abort', () => {
+          onAbortMock()
+          clearTimeout(timer)
+          resolve()
+        })
+      })
+    },
+    pendingComponent: {},
+  })
+  const barRoute = new BaseRoute({
+    getParentRoute: () => rootRoute,
+    path: '/bar',
+  })
+  const routeTree = rootRoute.addChildren([fooRoute, barRoute])
+  const router = new RouterCore({ routeTree, history: createMemoryHistory() })
+
+  await router.load()
+  router.navigate({ to: '/foo' })
+  await sleep(WAIT_TIME * 30)
+
+  // At this point, pending timeout should have triggered
+  const fooMatch = router.getMatch('/foo')
+  expect(fooMatch).toBeDefined()
+
+  // Navigate away, which should cancel the pending match
+  await router.navigate({ to: '/bar' })
+  await router.latestLoadPromise
+
+  expect(router.state.location.pathname).toBe('/bar')
+
+  // Verify that abort was called and pending timeout was cleared
+  expect(onAbortMock).toHaveBeenCalled()
+  const cancelledFooMatch = router.getMatch('/foo')
+  expect(cancelledFooMatch?._nonReactive.pendingTimeout).toBeUndefined()
+})
+
 function sleep(ms: number) {
   return new Promise<void>((resolve) => setTimeout(resolve, ms))
 }

packages/solid-router/tests/loaders.test.tsx

@@ -713,3 +713,69 @@ test('clears pendingTimeout when match resolves', async () => {
   expect(nestedPendingComponentOnMountMock).not.toHaveBeenCalled()
   expect(fooPendingComponentOnMountMock).not.toHaveBeenCalled()
 })
+
+test('cancelMatches after pending timeout', async () => {
+  function getPendingComponent(onMount: () => void) {
+    const PendingComponent = () => {
+      onMount()
+      return <div>Pending...</div>
+    }
+    return PendingComponent
+  }
+  const onAbortMock = vi.fn()
+  const fooPendingComponentOnMountMock = vi.fn()
+  const history = createMemoryHistory({ initialEntries: ['/'] })
+  const rootRoute = createRootRoute({
+    component: () => (
+      <div>
+        <h1>Index page</h1>
+        <Link data-testid="link-to-foo" to="/foo">
+          link to foo
+        </Link>
+        <Link data-testid="link-to-bar" to="/bar">
+          link to bar
+        </Link>
+        <Outlet />
+      </div>
+    ),
+  })
+  const fooRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/foo',
+    pendingMs: WAIT_TIME * 20,
+    loader: async ({ abortController }) => {
+      await new Promise<void>((resolve) => {
+        const timer = setTimeout(() => {
+          resolve()
+        }, WAIT_TIME * 40)
+        abortController.signal.addEventListener('abort', () => {
+          onAbortMock()
+          clearTimeout(timer)
+          resolve()
+        })
+      })
+    },
+    pendingComponent: getPendingComponent(fooPendingComponentOnMountMock),
+    component: () => <div>Foo page</div>,
+  })
+  const barRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/bar',
+    component: () => <div>Bar page</div>,
+  })
+  const routeTree = rootRoute.addChildren([fooRoute, barRoute])
+  const router = createRouter({ routeTree, history })
+  render(() => <RouterProvider router={router} />)
+  await router.latestLoadPromise
+  const fooLink = await screen.findByTestId('link-to-foo')
+  fireEvent.click(fooLink)
+  await sleep(WAIT_TIME * 30)
+  const pendingElement = await screen.findByText('Pending...')
+  expect(pendingElement).toBeInTheDocument()
+  const barLink = await screen.findByTestId('link-to-bar')
+  fireEvent.click(barLink)
+  const barElement = await screen.findByText('Bar page')
+  expect(barElement).toBeInTheDocument()
+  expect(fooPendingComponentOnMountMock).toHaveBeenCalled()
+  expect(onAbortMock).toHaveBeenCalled()
+})