Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple loading.tsx files causes extra transition when revalidating with server actions on 14.2.x+ #65454

Open
Xexr opened this issue May 7, 2024 · 0 comments
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@Xexr
Copy link

Xexr commented May 7, 2024

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

@Xexr Xexr added the bug Issue was opened via the bug report template. label May 7, 2024
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label May 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Development

No branches or pull requests

1 participant