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

[einarq]

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.

@brophdawg11
Could you point me to an example of how to implement this type of loading state UI? Is there an example in your code somewhere?
I'm struggling a lot with loaders and lazy routes and error handling etc with React Router unfortunately. Not finding the api very easy to groc.

[brophdawg11]

Can you elaborate on what you're struggling with? navigation.state tells you the navigation state so you can use that to show a spinner or a progress bar.

// potentially in your app layout
function Layout() {
  let navigation = useNavigation();
  return (
    <div>
      {navigation.state !== "idle" ? <Spinner /> : null}
      <Header />
      <Outlet />
      <Footer />
    </div>
  );  
}

If you are having specific issues, it would be helpful if you could provide a slimmed down code sandbox example what demonstrates the problem.

[einarq]

That works on the top-level, but harder to achieve on a sub-route. I guess you then have to use some type of logic to check every to and from location, to check where to display the loading dots.

Disclaimer: I know that loading dots is not the best UX, but its what we have. I will probably try to convert to a "loading bar+gray out content" approach and see what people think.

[VillePakarinenPosti]

@brophdawg11 Could HydrateFallback prop on route be extended so that it would display on subsequent navigations if the matched path has unresolved lazy or the upcoming patch-route defined?

[Hypermona]

Can you elaborate on what you're struggling with? navigation.state tells you the navigation state so you can use that to show a spinner or a progress bar.

// potentially in your app layout
function Layout() {
  let navigation = useNavigation();
  return (
    <div>
      {navigation.state !== "idle" ? <Spinner /> : null}
      <Header />
      <Outlet />
      <Footer />
    </div>
  );  
}

If you are having specific issues, it would be helpful if you could provide a slimmed down code sandbox example what demonstrates the problem.

Instead of this why can't we accept the fallback component and handle it internally

[HazyFish]

useNavigation() gives the navigation state of the entire app. If I have deeply nested routes and use useNavigation() on top level layout component, then when user navigates between sub-sub-routes of the same sub-route, we are showing the fallback at top level. It does not solve my problem either.

[einarq]

This is definitely an issue, agree:
#10540 (reply in thread)

[einarq]

So I wouldn’t show a spinner or something that triggers unmount, but rather some type of transparent overlay