How to show a loading UI while loader is pending in React Router 7.6?

[MoRezaDev]

Hi guys!
I'm using createBrowserRouter with React Router 7.6, and I'm running into an issue where the app doesn't render anything while a loader is pending — especially for the root route.

Here's a simplified version of my router setup:

This causes a 3-second blank screen before anything renders.
What’s the recommended way to show a loading UI while the loader is running before the route renders?

• Move loader logic into a wrapper component and handle loading state manually?
• Or is there a built-in way to show a global or route-level loading screen while the loader is pending?

[GabenGar]

hydrateFallbackElement probably.

[dtetreau-Oracle]

I ran into this exact same question, where I'd like to render a placeholder UI until the loader is complete. In my case, I'm using both a server loader and a clientLoader. Based on @GabenGar's suggestion above, I tried to achieve this using the HydrateFallback mechanism, but it never seemed to render, both with and without clientLoader.hydrate = true configured. Or rather, it did render when clientLoader.hydrate = true, but only after and in addition to the initial server-side loader invocation. Specifically, if I set clientLoader.hydrate = true and added a artificial 1 second sleep to the server API that both my loader and clientLoader are calling, then I see a delay of 1 second while the loader executes on the server, then the page renders the HydrateFallback content, followed by a further 1 second delay while the clientLoader executes on the client.

Based on the above, I don't think the HydrateFallback mechanism is the right tool for the job here. I also explored using the useNavigation hook approach described in the [Pending UI|https://reactrouter.com/start/framework/pending-ui] documentation. But that also didn't work, because it seems that the useNavigation hook only triggers when the navigation is leaving a given route. So if I have routes A and B, and the user navigates from A -> B, it will be the A route which is rendered with navigating = true, when I instead want to have B rendering its temporary UI, because B is the route the user is navigating to.

In summary, this is the functionality I'm looking to implement:

1. A route's loader is configured to call a backend API which might be slow.
2. On initial page load, the loader executes on the server as normal for RR7's framework/SSR mode. The initial page load may take a while to render if the backend API is slow - that's fine, there's really no way around that (or rather, theoretically I could unconditionally render a pending UI on the server then fill in the data on the client, but I don't want to do that, I want to serve the full HTML from the server).
3. On subsequent navigations to that route, RR7 invokes the loader function from the client.
4. While the loader function promise is executing, I want to render a pending UI rendered by the route being navigated to.
5. Once the loader function promise completes, I want to render the final UI of the route being navigated to.