[Bug]: White screen on refresh of page when using "loader" in elements. Not even Navbar component is shown.

[joseph-9900]

What version of React Router are you using?

6.8.1

Steps to Reproduce

This is the test URL. - https://codesandbox.io/s/wispy-pond-kj8ofh?file=/src/App.js

1.) Click on Products link from Navbar.
2.) And then wait for around 200 milliseconds for the data to be loaded. And then once refresh the page from refresh

Expected Behavior

The Navbar component should be visible immediately and the Products component data should load in it's time.

Actual Behavior

The entire page becomes white / blank and then the entire data is visible when the refresh button is clicked. At least the Navbar should be visible. loader is used on "Products" component and not on Navbar but still Navbar is not visible until product data arrives.

I don't want to use the "defer". I will be using a loading bar later so that data is shown once the data is available.
How to solve this issue of screen blank when refreshed?

[brophdawg11]

This feels like it could be a codesandbox browser issue. Pulling that down locally and running it I see the NavBar rendered immediately on refresh from /products. Anything you put in fallbackElement will render during the initial data fetch.

[laripereira14]

I'm having the same issue. I can't even navigate to the route that has the loader, only when the data is loaded I get redirected to the page. Is this the intented behavior? Still trying to wrap my head around v.6.4.

[brophdawg11]

A reproduction would help to make sure we're talking about the same thing. But from your question I think the answer is yes, but I would reword your statement to avoid confusion:

only when the data is loaded I get redirected to the page

Instead, I would say "only when the data is loaded does the destination page render." The "redirection" logic is potentially confusing because you can navigate A->B and then B's loader can redirect to C. That's different that displaying the components for route B.

Data loading and rendering are decoupled in RouterProvider to avoid the render-driven fetch/spinner waterfalls common in nested UIs that fetch data during render. Instead, the router matches all routes up front, runs all of the the loaders in parallel, and once completed it renders the destination route components all at once. During the load you will still see the current page (just like you would in a normal non-JS browser navigation) and you can show whatever loading indication you prefer via useNavigation().state which will go into a loading state during the loader executions.

Here's two good resources that discuss the data routing approach:

• https://remix.run/blog/remixing-react-router
• https://www.youtube.com/watch?v=95B8mnhzoCM

[laripereira14]

Thank you for the clarifications and the resources, got some valuable information from there! But I actually can't navigate to the route that has the loader. No matter how many times I click the <NavLink> that points to the route, the URL only changes when the data is loaded. I'm passing a react-query's queryClient as a function parameter (pattern described here). This is my code, for some context:

const shelfLoader = (queryClient: QueryClient) => async () => {
    const query = getShelfQuery();
    return (
        queryClient.getQueryData(query.queryKey) ??
        (await queryClient.fetchQuery(query))
    );
}; 

export const ShelfRoutes = {
	path: 'shelf',
	element: <Shelf />,
        loader: shelfLoader(queryClient)
};

[brophdawg11]

the URL only changes when the data is loaded

This sounds like the intended behavior.

If you are not seeing your destination components ever rendering, then please provide a reproduction to help dig in further.