How to get page loaders when navigating to a different route?

[VigneshVaidyanathan]

I am building a very simple application and just getting started with Remix and I love the simplicity so far.

When I am navigating to a new route, on click of a Link, it executes the loader function of the route and renders the page, which is perfect. The loader function takes 4-5secs to finish as it has to fetch the data from database. For that 4-5secs of execution time, the application stays idle and there is no way to indicate to the user that it is happening behind the screens. In a typical SPA, we would immediately navigate to the new route and load the data, while we show the loaders.

I currently have 2 solutions in mind.

1. Show a page level loader when the navigation to a new route happens, which shows the spinner until the page is fully redirected to the new route after the loader is completed.
2. Return a simple response from loader, which makes the page to load faster and then use fetchers to get the actual data and show the page loading skeletons based on transition (which is pretty similar to SPA).

Is there a way to show loaders like those in Remix or is there a better way to handle it?

[kiliman]

Ideally, you figure out what's causing your database to take 4-5 seconds.

However, for #1, you can add nprogress to your root route and show a progress meter on every navigation. https://sergiodxa.com/articles/use-nprogress-in-a-remix-app

As for #2, that's a reasonable workaround.

I understand that the Remix team is working on adding a deferred response, so a loader can return quickly and the server will stream the response to the client as data comes in.

[VigneshVaidyanathan]

I am looking to optimize the database performance. Maybe it is because it is in a different region but anyways, thanks for the answer.