Layout shift while rendering on hard navigation from 14.2.2

[navin-moorthy]

Link to the code that reproduces this issue

https://github.com/navin-moorthy/next.js-layout-shift-from-14.2.2

To Reproduce

1. Check the next version - next": "14.2.2
2. Run npm run dev
3. Go to HomePage /
4. Go to AboutPage /about
5. Hard refresh
6. Go to Homepage '`'
7. To reproduce again, Hard refresh
8. Go to AboutPage /about

You will be able to see the footer and then render the page.tsx contents both on HomePage and AboutPage

Repeat above steps if it's not visible.

Current vs. Expected behavior

Current next": "14.2.2 & above

Footer will be rendered below Header and then the contents from page.tsx pushed down the Footer.

NOTE: Also checked future versions including canary versions)

I tried best but I couldn't capture that frame in a video recording.
But here's the same version to reproduce,

2024-05-15.at.19.42.07.-.Magenta.Jaguar.mp4

Expected next": "14.2.1

NOTE: Make sure to clear next folder, after changing the versions

In this version, you don't see any layout shifts.

Footer will be rendered properly and then the contents from page.tsx replaced the Footer.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 14.2.2 // There is a newer version (14.2.3) available, upgrade recommended! 
  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

NOTE: Happens everywhere

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), Other (Deployed)

Additional context

No response

[navin-moorthy]

Here's an update on reproduction in my local,

bug-reproduction.mp4

At 0:08, That specific frame where we get the empty page,

in-slow-motion.mp4