nextjs - 💡(How to fix) Fix `useTransition` stuck in loading state when using `router.refresh()` after calling a server action [9 comments, 4 participants]

Link to the code that reproduces this issue

https://github.com/vinassefranche/use-transition-hanging

To Reproduce

1. build the application as the issue only occurs on the built version: pnpm run build
2. serve the application: pnpm run start
3. go to http://localhost:3000/ in a browser
4. click on the "trigger action" button
5. see the button being stuck in loading... state and the render date not being updated

If the button is not stuck, click on it a few times. If still not, re-start the application and try again. If not, add more <BigBlock /> in the page as it seems like the more blocks we add, the more likely the issue is to occur

Current vs. Expected behavior

The page is not re-rendered and the button is stuck on the loading state while the page should be re-rendered and the button not in loading state. The issue is not always present though, even though it's there most of the case. It can occur on the first click but can work a few times and then not work. It seems like the more content I add to the page, the more likely the issue is to occur.

Here's a video of the issue:

https://github.com/user-attachments/assets/1ee33bef-86a0-4282-8205-1458f1748e54

Here are a few things that I found made the issue disappear:

• remove the loading.tsx file
• downgrade next to the version 15.4.7 (works even when specifying --turbopack to the build command)
• keep only one <BigBlock /> in the page
• stop awaiting fakeDataRetrieval()

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #29~24.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Jun 26 14:16:59 UTC 2
  Available memory (MB): 63932
  Available CPU cores: 22
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: 1.22.22
  pnpm: 9.15.5
Relevant Packages:
  next: 16.0.1 // There is a newer version (16.0.2) available, upgrade recommended! 
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Not sure

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

next start (local)

Additional context

I tested the code with different versions of next and managed to find that the issue came with this commit