Navigation is not immediate when using loading.tsx (#pagination, #searchParams)?
Unanswered
Atlantic mackerel posted this in #help-forum
Atlantic mackerelOP
There's the following sentence in the Next documentation for Loading UI and Streaming (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) :
"Navigation is immediate, even with server-centric routing."
I tried implementing simple pagination for server rendered page leveraging loading.tsx and faked slow request (3 seconds).
At initial load I get layout with content defined in loading.tsx immedtiately, but for subsequent requests to /?page=2 the navigation is NOT immediate -> user clicks <Link href='/page=2> and nothing happens for (at least) 3 seconds.
Shouldn't the Next show loading.tsx's content IMMEDTIATELY when doing this?
The full code is here:
https://github.com/branislavbrincko/next-app-with-loading/tree/main/src/app
"Navigation is immediate, even with server-centric routing."
I tried implementing simple pagination for server rendered page leveraging loading.tsx and faked slow request (3 seconds).
At initial load I get layout with content defined in loading.tsx immedtiately, but for subsequent requests to /?page=2 the navigation is NOT immediate -> user clicks <Link href='/page=2> and nothing happens for (at least) 3 seconds.
Shouldn't the Next show loading.tsx's content IMMEDTIATELY when doing this?
The full code is here:
https://github.com/branislavbrincko/next-app-with-loading/tree/main/src/app
1 Reply
@Atlantic mackerel There's the following sentence in the Next documentation for Loading UI and Streaming (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) :
"Navigation is immediate, even with server-centric routing."
I tried implementing simple pagination for server rendered page leveraging loading.tsx and faked slow request (3 seconds).
At initial load I get layout with content defined in loading.tsx immedtiately, but for subsequent requests to /?page=2 the navigation is NOT immediate -> user clicks <Link href='/page=2> and nothing happens for (at least) 3 seconds.
Shouldn't the Next show loading.tsx's content IMMEDTIATELY when doing this?
The full code is here:
https://github.com/branislavbrincko/next-app-with-loading/tree/main/src/app
So after testing with your website, i think it only is used for route change. When I changed it to use dynamic routes, it shows the loading every time I change click the links... I think this is because for that type of change, you should be displaying the loading client side (or use dynamic routes for this)...
sorry for not great news, and this is from my observation and there might be a better way do do it... (i did try with manual suspense too)
sorry for not great news, and this is from my observation and there might be a better way do do it... (i did try with manual suspense too)