Link to the code that reproduces this issue
https://github.com/bananashell/nextjs-parallel-route-loading-issue
To Reproduce
- next dev
- hard reload localhost:3000 (loading of header is done as expected)
- hard reload localhost:3000/a
- loading of header is skipped and entier page results in being sync
Current vs. Expected behavior
If a loading.tsx is added to the root of a parallel route it only uses that suspense boundary on the root level.
Give this tree
/ (root)
@header
page.tsx
default.tsx
loading.tsx
/a
page.tsx
loading.tsx
/b
page.tsx
loading.tsx
- navigating to
/ will use the loading.tsx if @header/page.tsx is async
- navigating to
/adirectly would not use the loading.tsx for @header and prevent streaming from happening
The only solution I've found for this is to manually add a Suspense boundary to default.tsx
// @header/default.tsx
import HeaderSlot from "./page";
import { Suspense } from "react";
import Loading from "./loading";
export default function DefaultSlot() {
return (
<Suspense fallback={<Loading />}>
<HeaderSlot />
</Suspense>
);
}
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: unknown
Available memory (MB): 36864
Available CPU cores: 14
Binaries:
Node: 22.6.0
npm: N/A
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 15.0.3 // Latest available version is detected (15.0.3).
eslint-config-next: N/A
react: 18.3.1
react-dom: 18.3.1
typescript: N/A
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Parallel & Intercepting Routes
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
No response
Link to the code that reproduces this issue
https://github.com/bananashell/nextjs-parallel-route-loading-issue
To Reproduce
Current vs. Expected behavior
If a loading.tsx is added to the root of a parallel route it only uses that suspense boundary on the root level.
Give this tree
/will use the loading.tsx if@header/page.tsxis async/adirectly would not use the loading.tsx for@headerand prevent streaming from happeningThe only solution I've found for this is to manually add a Suspense boundary to
default.tsxProvide environment information
Which area(s) are affected? (Select all that apply)
Parallel & Intercepting Routes
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
No response