RootLayout static Metadata & Viewport flickers on client navigation to dynamic page with loading.tsx
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/kind-dream-ppgptn
To Reproduce
When using the App Router, if you have a RootLayout with static metadata (viewport, title), it works great when navigating across static pages. The metadata never changes, the title remains the same for all subpages of that layout.
As soon as you create a dynamic page (e.g. await connection()) then navigate to that page using a component, and create a "loading.tsx" for that dynamic page, it will Suspend the static metadata when you navigate to it, this causes the title to flicker. I was just ignoring at first, but when I tested my PWA I noticed my viewport theme was flickering, which was causing jarring issues since I have dynamic changes to the themeColors in my client (next-themes)
This led me down the rabbit hole to try to figure out why my parent static Layout wasn't getting immediately rendered. I discovered that the solution was indeed "loading.tsx". As soon as I delete loading.tsx, the metadata stopped flickering. I had to create a "Suspense wrapper" around my dynamic page to fix it. This works, but it adds extra boilerplate code to every dynamic page. It also means I cannot benefit from using "loading.tsx" at all in my project, since that will force the static RootLayout's metadata & viewport to be suspended, causing flickers.
Current vs. Expected behavior
Current:
Dynamic async pages cause reload flickers of parent static RootLayout metadata & viewport when loading.tsx is present.
Expected:
loading.tsx should not suspend or clear/reload the RootLayout's static metadata & viewport, loading.tsx should only suspend the page itself.
This bug only happens after builds, not during next dev
Provide environment information
Production App Router
Next.js 15.1.6 & canary
Which area(s) are affected? (Select all that apply)
Metadata, Navigation
Which stage(s) are affected? (Select all that apply)
next start (local), Vercel (Deployed)
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and compare client navigation in a production build with and without loading.tsx. Trace the RootLayout static metadata and viewport behavior around the dynamic page and loading boundary. Done means loading.tsx still works without flickering or clearing the parent metadata and viewport.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100