Create a fallback for lazy routes

[ryan-saffer]

Background

Since the release of a lazy route in 6.9, there is no way to provide a fallback component to display while the route is being loaded.

It seems the only way to provide one would be to not use react-routers lazy property, but instead use React.lazy to wrap our element in a React.Suspense. Without the ability to do this using react-routers lazy property, I don't really see a benefit to using it over React.lazy?

Using react-router-dom

// When doing this, there is no way to provide a fallback.
// When I click on a link that takes me to `my-route`, the app appears to freeze for a moment as it loads the component.
const router = createBrowserRouter([
    {
        path: 'my-route',
        lazy: () => import('./MyComponent'),
    },
])

Using React.Suspense

const MyComponent = React.lazy(() => import('./MyComponent'))

// but now I'm not using the 'lazy' property of the route..
const router = createBrowserRouter([
    {
        path: 'my-route',
        element:
            <React.Suspense fallback={<Loading />}>
                <MyComponent />
            <React.Suspense />
    }
])

Could anyone help me understand why I would use the first example instead of the second?

[brophdawg11]

It's a UX decision at the end of the day

• React.lazy is for render-then-fetch - absolutely valid to keep using that if that's your desired UX
• route.lazy is for fetch-then-render - which is not quite possible with React.lazy + Data Routers (or at least is overly complicated)

I personally prefer the latter to continue showing the user content during loading instead of flipping them to skeletons

[paolostyle]

I'm not sure if you'll be able to advise here, but how do I ensure the users still get some feedback when navigating to a route loaded with route.lazy? You're saying you "prefer to continue showing the user content during loading", but my experience is that it feels like the app is unresponsive. Imagine a simple scenario, a route with a sidebar that contains NavLinks to subroutes ( and an <Outlet />. Each subroute is loaded with route.lazy. Some chunks might be quite large and it might take e.g. a second to load one. How do I give the user instant feedback when they click the link ("Hey, we're loading the page, don't worry")? Currently, it's either impossible or I don't know how to do it.

If there isn't - out of curiosity, can you provide an example where such behavior is generally acceptable? I acknowledge that this might be highly subjective, even if I'm quite confident that some form of instant feedback is the generally desired behavior for any UI interaction (e.g. if a user clicks a link on a regular, non-SPA page, there is a spinner in the browser tab).

[brophdawg11]

Definitely not impossible 😉

We do exactly this on our own docs where we slightly fade out the current content and show a status bar at the top while content loads (throttle to 3G to see it best).

The hook you're looking for is useNavigation which will be in a non-idle status during navigations, which includes the resolution of route.lazy.

[paolostyle]

Awesome, thanks so much. I will try it but looking at the docs this is exactly what I needed.