[V7] Suspense Element Not Displaying During Lazy Loading Transition

[vladyslavgeyna]

I'm using React Router as a...

library

Reproduction

Sample code on CodeSandbox: https://codesandbox.io/p/github/vladyslavgeyna/lazy-loading-test/main?import=true&embed=1

1. Run the app.
2. Use the navigation bar on the left to navigate through the pages.
3. The loading fallback does not mount, but the console statement from the component is displayed.

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 65.13 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
  Browsers:
    Chrome: 131.0.6778.108
    Safari: 17.5
  npmPackages:
    react-router: ^7.0.2 => 7.0.2 
    vite: ^5.1.4 => 5.4.11

Used Package Manager

npm

Expected Behavior

The loading fallback should appear when navigating between pages using the navigation bar on the left side of the page.

Actual Behavior

When navigating between lazy-loaded routes, the Suspense fallback does not replace the current route while the new component is being loaded.

The issue is observed in version 7 of react-router when the lazy loading is used with Suspense.

At the initial load of the application, the Suspense element functions as expected. However, when navigating to another page that uses lazy loading, the following behavior is observed:

• The code of the fallback component executes (a console message is logged), but visually, the page remains as it was before the navigation.
• The new page only becomes visible once it finishes loading, whereas the Suspense element should have been displayed during the transition.
• Despite this, the URL changes immediately.

[agorilla]

I have exactly the same issue when I use Suspense while theRoute loader is fetching the data. The loading fallback is shown on the initial load but when the routes are changed not.

In React Router v6 I used defer for this but as it is removed from v7 I tired change my code like in guide:
https://reactrouter.com/how-to/suspense

But unfortunately this example does not work, the loading fallback is not shown.
Instead the rendering of the new route pauses until the data Promise is resolved.

[benfosterlitmos]

Noticed this after upgrading to V7 too. We use Suspense with lazily loaded route content. Now when navigating (clicking Link, useNavigate etc) instead of showing a loading state immediately from the Suspense fallback, the UI remains unchanged until it is loaded making the UI feel unresponsive due to the apparent lag between clicking a link and a change happening on screen.

[sicin]

Noticed this after upgrading to V7 too. We use Suspense with lazily loaded route content. Now when navigating (clicking Link, useNavigate etc) instead of showing a loading state immediately from the Suspense fallback, the UI remains unchanged until it is loaded making the UI feel unresponsive due to the apparent lag between clicking a link and a change happening on screen.

Recently updated to v7, also have this problem in a SPA React v18.3 app. Using React.lazy for most components, routes are created with createBrowserRouter() and createRoutesFromElements(). RouterProvider is wrapped in a top level Suspense.

[julien3]

I just found a workaround, reading other related issues #10568 (comment) and #10816 (comment).

Use <Suspense key>, eg with useLocation().key or a generation returned by your loader function.

For example:

function MyComp() {
  const location = useLocation()

  return (
    <Suspense 
      fallback={<LoadingComp text="Loading..." />}
      key={location.key}
    >
      <MyAwaitOrUseComp />
    </Suspense>
  )
}

[Sidharth1013]

@julien3 I tried using this approach, I am still facing this issue where the screen is stuck until the module for the new route is loaded dynamically without showing the Suspense loader.

Is there any other fix to this?

[julien3]

@Sidharth1013 I've been having this exact same issue upon upgrading to v7. Adding the key prop to suspense, set to location.key as suggested in the two tickets did it for me.

[li-jia-nan]

I encountered the same issue

[guoyunhe]

Same here. It is a deal breaker for me. Won't upgrade to v7 until this is fixed.

[HOAIAN2]

I just found a workaround, reading other related issues #10568 (comment) and #10816 (comment).

Use <Suspense key>, eg with useLocation().key or a generation returned by your loader function.

For example:

function MyComp() {
  const location = useLocation()

  return (
    <Suspense 
      fallback={<LoadingComp text="Loading..." />}
      key={location.key}
    >
      <MyAwaitOrUseComp />
    </Suspense>
  )
}

This work but it cause some unexpected re mount in my case, I think just put the component name as a string can solve this perfect. Here is my actual code.

const router = createBrowserRouter([
    {
        errorElement: <NotFound />,
        children: [
            {
                path: '/',
                element: <DashboardLayout />,
                children: [
                    {
                        path: 'profile',
                        element: <Suspense key='profile' fallback={<SuspenseLoading />}><Profile /></Suspense>
                    },
                    {
                        path: 'permissions',
                        children: [
                            {
                                index: true,
                                element: <Suspense key='permissions' fallback={<SuspenseLoading />}><Permissisons /></Suspense>
                            },
                            {
                                path: ':id',
                                element: <Suspense key='role-permissions' fallback={<SuspenseLoading />}><RolePermissions /></Suspense>
                            },
                        ],
                    },
                    {
                        path: 'settings',
                        element: <Suspense key='settings' fallback={<SuspenseLoading />}><Settings /></Suspense>,
                        children: [
                            {
                                index: true,
                                element: <Suspense key='settings' fallback={<SuspenseLoading />}><Settings /></Suspense>
                            },
                            {
                                path: ':name',
                                element: <Suspense key='settings' fallback={<SuspenseLoading />}><Settings /></Suspense>
                            },
                        ],
                    },
                ]
            }
        ]
    }
]);

[li-jia-nan]

I think just put the component name as a string can solve this perfect. Here is my actual code.

You can also use path as a key. In any case, just make sure it is unique.

[NareshBisht]

I just found a workaround, reading other related issues #10568 (comment) and #10816 (comment).

Use <Suspense key>, eg with useLocation().key or a generation returned by your loader function.

For example:

function MyComp() {
  const location = useLocation()

  return (
    <Suspense 
      fallback={<LoadingComp text="Loading..." />}
      key={location.key}
    >
      <MyAwaitOrUseComp />
    </Suspense>
  )
}

This worked you me but in my case i had multiple 'Suspense' in my page so I had to add 'key' to all the 'Suspense' for it to work.