Site not interactive when using suspense on initial load (Safari only?)

[JClackett]

Link to the code that reproduces this issue

https://github.com/JClackett/nextjs-initial-load

To Reproduce

• Start the application
• Load up localhost:3000
• Initial load doesnt allow interactivity of the popover

Other observations:

• Go to page 2, and refresh, then navigate to page 1 - the popover should be interactive now...
• Any time you clear the browser cache and hard refresh on page 1, popover is not interactive, or if manually going to localhost:3000 after clearing browser cache

Current vs. Expected behavior

Client side components outside of the suspense boundary should be interactive always?

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8
Binaries:
  Node: 20.18.3
  npm: 10.8.2
  Yarn: N/A
  pnpm: 8.15.9
Relevant Packages:
  next: 14.2.24 // An outdated version detected (latest is 15.1.7), upgrade is highly recommended!
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.3
Next.js Config:
  output: N/A

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

Dynamic Routes, Loading UI and Streaming

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

next dev (local), Vercel (Deployed)

Additional context

I am using safari, and can't seem to replicate on chrome so maybe safari and streaming??

Deployed version here:

https://nextjs-initial-load.vercel.app

Weirdly, sometimes it works, but im often able to reproduce by clear browser cache and reloading.

Screen.Recording.2025-02-20.at.11.41.06.mov