Multiple loading.tsx files causes extra transition when revalidating with server actions on 14.2.x+ #65454
Labels
bug
Issue was opened via the bug report template.
Navigation
Related to Next.js linking (e.g., <Link>) and navigation.
Link to the code that reproduces this issue
https://github.com/Xexr/revalidate-bug
To Reproduce
npm install
to install all dependencies.npm run dev
to start the server.Open http://localhost:3000/example with your browser
Click the button and you will see that a loading transition is briefly shown on the first press but not on any subsequent presses. This behaviour didn't previously occur with 14.1.4, the first press (and subsequent presses) would revalidate the data without any loading transitions.
The effect in a bigger application is that when a user first invokes a server action, they get a jarring 'refresh' where previously they didn't.
This now appears to happen where multiple layout.tsx and loading.tsx files are present. Remove one of the loading.tsx files and you will see that behaviour reverts to the expected behaviour. I'm not sure if this is part of the root cause, or just masking it by removing a transition.
You can see a vercel deployed example here:
https://revalidate-bug-nine.vercel.app/example
Current vs. Expected behavior
Current (the problem)
With Next 14.2.x+, when I click the revalidate button, the loading icon now appears for the first press.
Hard refresh (F5) to see the behaviour again.
Expected behavior
Previously, with Next 14.1.4, when I clicked the revalidate button, the data would revalidate 'behind the scenes' and no loading icon would show for the first press or subsequent presses.
Provide environment information
Operating System: Platform: linux Arch: x64 Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024 Available memory (MB): 15946 Available CPU cores: 32 Binaries: Node: 20.12.2 npm: 10.5.0 Yarn: N/A pnpm: 8.12.1 Relevant Packages: next: 14.2.3 // Latest available version is detected (14.2.3). eslint-config-next: 14.2.3 react: 18.3.1 react-dom: 18.3.1 typescript: 5.4.5 Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
Navigation
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local), Vercel (Deployed)
Additional context
Works as expected on 14.1.4
Bug appears to be introduced from 14.2.x onwards
The text was updated successfully, but these errors were encountered: