nextjs - 💡(How to fix) Fix `loading.js` sometimes causes soft-navigation to get stuck and not render the new page, despite receiving it from the server [9 comments, 5 participants]

Link to the code that reproduces this issue

https://github.com/mogzol/next-stuck-navigation-repro

Relevant components:

• RefreshButton.tsx - Calls router.refresh() to trigger the soft refresh that sometimes gets stuck
• page.tsx - Renders the refresh button as well as several slow client components that increase page size and render time
• loading.tsx - The page's loading UI. This file existing causes the issue to occur. The actual contents of the loading UI don't seem to matter, just whether it exists or not.

To Reproduce

1. Start the application in production mode (npm run build && npm run start)
2. Open the page in your browser and press the "Refresh" button on the page to trigger a soft refresh (calls router.refresh())
3. Observe that sometimes the new page never loads, and the loading indicator stays visible indefinitely.
   • The request for the new page still completes successfully in the network monitor
   • Changing network request throttling can make this issue more or less likely ("Fast 4G" almost always triggers it, "Slow 4G" never does)
   • Changing the GARBAGE_ITEMS environment variable before starting the app also makes the issue more or less likely
     • GARBAGE_ITEMS=10 npm run start - Almost never has the issue
     • GARBAGE_ITEMS=100 npm run start - Almost always has the issue
   • Removing the loading.tsx file for the page makes the issue go away completely

Here's a screen recording showing the issue. The first couple refreshes work fine, but then it gets stuck on the third one. Then after performing a full page reload, it gets stuck again on the first refresh. Then after changing the network request throttling to "Slow 4G", the issue goes away.

https://github.com/user-attachments/assets/6ec273db-20b8-4f97-9310-04c8e13aa007

Current vs. Expected behavior

I would expect the soft refresh to always work, and never get stuck. Currently, if a page has a loading.js file, it randomly gets stuck. It seems that this is more likely if your page has client components that take a while to render.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32673
  Available CPU cores: 24
Binaries:
  Node: 24.11.1
  npm: 11.6.2
  Yarn: 1.22.22
  pnpm: 10.7.1
Relevant Packages:
  next: 16.0.3 // Latest available version is detected (16.0.3).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

I also tested this on macOS and confirmed it occurs there. I have tested both Chrome and Firefox and the issue occurs in both.

Which area(s) are affected? (Select all that apply)

Linking and Navigating

Which stage(s) are affected? (Select all that apply)

next start (local), Other (Deployed)

Additional context

I have been able to reproduce this issue on both Next.js 15 and Next.js 16, I'm not sure when it was introduced. As mentioned above, it only seems to happen on pages that have a loading.tsx file. I haven't been able to reproduce it for pages that don't have a loading UI.