Link to the code that reproduces this issue

https://github.com/TrevorBurnham/nextjs-loading-flicker-repro

To Reproduce

1. Create a page.tsx and a loading.tsx in the App Router
2. Prefetch data in page.tsx and use that data to populate the TanStack Query cache
3. Use TanStack Query's useSuspenseQuery to consume that data
4. Load the page in the browser

Current vs. Expected behavior

I'd expect the full contents of the page to be shown immediately with no loading state since all data required by the page is prefetched (that is, the TanStack Query cache is already populated with the data it consumes).

Instead, I'm seeing a flicker of loading state before I see the page contents.

Strangely, the page's HTML contains both the loading state and the actual page content, yet the page content is hidden until some JavaScript executes.

In my mind, this behavior defeats the seamless loading experience that's supposed to be one of the benefits of SSR. It feels like I'm facing a very harsh tradeoff: I can either use loading.tsx to have responsive navigation, or I can omit it to have fully functioning SSR.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:09:40 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.17.1
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.22.0
Relevant Packages:
  next: 16.1.0 // Latest available version is detected (16.1.0).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Loading UI and Streaming

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

Other (Deployed)

Additional context

No response