<Suspense/> <Await/> not working as expected

[anapeksha]

Reproduction

I am using RR v7 in framework mode to build an SPA with clientLoader & clientAction
Wrap any <Outlet/> with <Suspense/> to implement a local loading state which is unique per route.

The main problem is I can safely create a global navigation loader with useNavigation(). But, I fail to create local loaders with Suspense & Await, the navigations are taking place without any loader appearing.

• I am correctly returning axios promises and am making sure that none of the calls are awaited along the way
• The API calls are correctly executing and is being cancelled through AbortController of request.signal in clientLoader

Implementation example:

In the layout

<Suspense fallback={<Loader />}>
     <Outlet />
</Suspense>

<Await resolve={loaderData}>
     {(data) => (<></>)}
</Await>

export async function clientLoader({
  request,
  params,
}: Route.ClientLoaderArgs) {
  const httpService = new HttpService();
  const { organizationId } = params;
  const {
    skip = 0,
    take = 10,
    query,
  } = Object.fromEntries(new URL(request.url).searchParams.entries());

  return httpService.post<IUserPaginatedLoaderData>(
    `/organizations/${organizationId}/users/query`,
    {
      skip,
      take,
      query,
    },
    {
      signal: request.signal,
    },
  );
}

System Info

System:
    OS: macOS 15.6.1
    CPU: (8) arm64 Apple M2
    Memory: 138.28 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.19.0 - /opt/homebrew/bin/node
    npm: 10.9.3 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 140.0.7339.133
    Safari: 18.6
  npmPackages:
    @react-router/dev: ^7.8.1 => 7.8.1 
    @react-router/node: ^7.8.1 => 7.8.1 
    @react-router/serve: ^7.8.1 => 7.8.1 
    react-router: ^7.8.1 => 7.8.1 
    vite: ^6.3.5 => 6.3.5

Used Package Manager

npm

Expected Behavior

The local loaders should show while navigating between routes and clientLoader for next route is being called.

Actual Behavior

No loaders are shown at all.

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. This should help us to focus on actionable issues and be more responsive to newly filed issues.

To get this re-opened, please add a reproduction to the Issue description and tag @brophdawg11 or @brookslybrand in a comment so we can re-open.

Or, if this was closed by mistake and there is a valid reproduction, please ensure that it is linked in the Issue description and and tag @brophdawg11 or @brookslybrand in a comment so we can re-open.

If you have any questions, you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!

[anapeksha]

Please check @brophdawg11 @brookslybrand

[timdorr]

Please read the message. You need to provide a runnable reproduction of the issue.

[anapeksha]

Please read the message. You need to provide a runnable reproduction of the issue.

Apologies @timdorr ! I have created a v7 router instance with the same issue. There is a 5 second timeout in each clientLoader, during which the Suspense fallback should be triggered, but it simply waits the other route loads.

Devbox URL

[timdorr]

The Suspense component only resolves one time. It cannot go back to a fallback state, which is what you're trying to do with Await.

If you're wanting to show a loading state, you should use HydrateFallback or useNavigation to show that to the user. Suspense is for handling critical vs non-critical data.

[anapeksha]

Understood, but how do I solve showing a loader per route (each route has separate skeleton loaders), i.e. when clientLoader fires.

Also, HydrateFallback is only for server-side applications. My application is an SPA

[anapeksha]

@timdorr

[anapeksha]

@brophdawg11 , @brookslybrand and @timdorr is the reproduction enough to open this bug? The docs say that we can use HydrateFallback with clientLoader, but probably it is not possible in SPA mode too.

[timdorr]

I linked the way to do that: https://reactrouter.com/start/framework/pending-ui