Loading.tsx takes time to show on slow networks.
Unanswered
Southern yellowjacket posted this in #help-forum
Southern yellowjacketOP
Hey everyone,
I've been working on an app that needs to show immediate loading feedback when users navigate between routes, and I've run into a limitation with Next.js App Router that I wanted to discuss.
The Problem
When using loading.tsx in Next.js App Router on very slow connections (or with prefetching disabled), there's a significant delay before the loading state appears. This happens because:
loading.tsx is essentially just a Suspense boundary wrapping the page component
Suspense only shows its fallback after the server has started responding and the component suspends
On slow connections, this means users might see no feedback for several seconds after clicking a link
This creates a poor UX, especially for modal interfaces or transitions that should provide immediate visual feedback.
Current Workarounds
I've been experimenting with a custom client-side solution:
A simple pub/sub or Context-based state manager that tracks navigation state
A wrapper around <Link> that immediately sets "isNavigating" to true on click
Components that listen to this state to show loading UI instantly
This approach shows loading UI the moment a user clicks, without waiting for the server to respond at all.
Questions
Has anyone else run into this issue and found a good solution?
Is there a built-in way to handle this in Next.js that I'm missing?
Would a small library that handles "instant loading states" be useful to others?
I've been working on an app that needs to show immediate loading feedback when users navigate between routes, and I've run into a limitation with Next.js App Router that I wanted to discuss.
The Problem
When using loading.tsx in Next.js App Router on very slow connections (or with prefetching disabled), there's a significant delay before the loading state appears. This happens because:
loading.tsx is essentially just a Suspense boundary wrapping the page component
Suspense only shows its fallback after the server has started responding and the component suspends
On slow connections, this means users might see no feedback for several seconds after clicking a link
This creates a poor UX, especially for modal interfaces or transitions that should provide immediate visual feedback.
Current Workarounds
I've been experimenting with a custom client-side solution:
A simple pub/sub or Context-based state manager that tracks navigation state
A wrapper around <Link> that immediately sets "isNavigating" to true on click
Components that listen to this state to show loading UI instantly
This approach shows loading UI the moment a user clicks, without waiting for the server to respond at all.
Questions
Has anyone else run into this issue and found a good solution?
Is there a built-in way to handle this in Next.js that I'm missing?
Would a small library that handles "instant loading states" be useful to others?