Indicate loading when page transition takes a long time

[balazsorban44]

I use a combination of getStaticPaths with fallback: true and getStaticProps, with some additional client-side fetching (reason being, part of the page data is public, but I have to fetch some of it client-side, only if the user is logged in). The client-side fetch can take a few 100ms to load, and this time, the client is stuck on the previous page without any indication of that the page is loading/working on something.

Usually it happens going from pages/[...slug].jsx to pages/[...slug].jsx (so the same page, but different url/props), I mention it, although it might be irrelevant.

Is there any way of telling Next.js "go ahead, render the next page with the fallback (or the data from getStaticPaths)" if the transition takes eg. more than 100ms?

#11088 might be similar, but it does not look to be answered either.

[rafaelalmeidatk]

Is there any way of telling Next.js "go ahead, render the next page with the fallback (or the data from getStaticPaths)" if the transition takes eg. more than 100ms?

This is already the default behavior 🤔
Client-side requests don't block the navigation/rendering of new pages since they don't run in the server. Do you have any example where we can check this behavior?

FYI, if you want to add a loading indicator to client-side navigation you can follow this example: https://github.com/vercel/next.js/tree/canary/examples/with-loading

[balazsorban44]

I will try creating a reproduction, thanks, I'll also check out the with-loading example, and come back.

[balazsorban44]

Turns out the transition itself happens right away, but since the page I am rendering blocks for several 100ms, it looks like nothing is happening ("stuck on the prev. page"). I know it is not ideal, but fortunately these enormous pages are rare in the app, most of them looks fine, and the loading indicator helped a lot to indicate to the user that something is happening, although it freezes when the heavy rendering starts. Concurrent mode may help in the future, but I am not ready to convert yet.