Disable loaders on initial load of application

[albehrens]

I have a global loading animation whenever the router is loading for more than 100ms using const { isLoading } = useRouterState();.

Every route has a loader. If a loader needs 1000ms to fetch data, then the global loading indicator is shown before the application transitions to the selected route. This is great, because this way users see the previous page and only see the next page when the data is fully fetched.

But on the initial load of the application there is no previous page, therefore the loader blocks the rendering and users see a blank page for 1000ms.

When using pendingComponent the isLoading of the router state switches to false way before the loader resolves. After all, I do not want to use a loader/pending component.

That loader component should only be displayed when users initial enter the application and there is no previous page to look at.

How can I achieve that?

[albehrens]

The basic file-based example from the docs shows this problem really well when I increase the artificial load time from 500 to 5000ms: https://tanstack.com/router/latest/docs/framework/react/examples/basic-file-based

It actually shows another challenge that I am trying to solve: When you increase the load time from 500 to 5000 for posts, but the load time for a single post stays at 500, users have to wait for the entire 5000ms when landing on a /posts/1 route directly even though the desired information is already available after 500ms.