Broken loading.tsx after upgrade to v15

[tilman]

Link to the code that reproduces this issue

https://github.com/trieb-work/nextjs-broken-loading-tsx-in-v15

To Reproduce

1. create a async page with some await
2. create a async layout with some await
3. create a loading tsx
4. Loading tsx will not show up unless the await is removed from layout.tsx

For more details open the repro

Current vs. Expected behavior

I expect that the upper laoding.tsx is rendered as long as layout.tsx is awaiting it's async functions. After all async functions of layout have returned I expect that inner loading.tsx is rendered using the layout.

Currently the old layout (previous url) is rendered and as soon as all awaited functions in layout+page have returned the page is rendered directly (and loading tsx is skipped)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.6.0
Relevant Packages:
  next: 15.0.0-rc.0 // Latest available version is detected (15.0.0-rc.0).
  eslint-config-next: N/A
  react: 19.0.0-rc-6f23540c7d-20240528
  react-dom: 19.0.0-rc-6f23540c7d-20240528
  typescript: 5.3.3
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

I tested my repro against different releases. In v14 loading tsx is showing up. But also not with the correct timing (way after layout.tsx has finished loading) but still better as in v15 where loading tsx is not showing up at all.

[wyattjoh]

When Next.js sees a loading file (loading.tsx), it uses it as a replacement for the page file (page.tsx), and not the layout file (layout.tsx). In your reproduction, there's a longer delay for the layout than there is for the page. If you were to have added console logs before those calls to sleep, you would have noticed that the pages and the layouts were rendered in parallel. So the page actually finished first, the layout second.

In this case, the layout blocked longer then the page took, so the loading wasn't shown. If you had placed a loading.tsx file in the app/loading_tsx_not_working folder, you would have seen that loading state right away.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.