Expected loading.tsx behaviour for non-immediate descendants
Unanswered
Ocicat posted this in #help-forum
OcicatOP
I have read all docs/github/discord posts I can find to get a definitive answer on this but I keep reading conflicted statements.
If i have the following structure:
app
-- dashboard
---- page.tsx
---- overview
------ page.tsx
-- layout.tsx
-- loading.tsx
-- page.tsx
The loading fallback will only fire on navigations to "/" and "/dashboard", i.e. siblings and direct child pages.
It does not trigger on navigation to any descendant that is not a direct child of the loading.tsx location (e.g. /dashboard/overview).
Is this the expected behaviour? If so, is there a reason behind it that I'm not fully understanding?
I appreciate I can litter loading.tsx everywhere but that seems unnecessary boilerplate.
If i have the following structure:
app
-- dashboard
---- page.tsx
---- overview
------ page.tsx
-- layout.tsx
-- loading.tsx
-- page.tsx
The loading fallback will only fire on navigations to "/" and "/dashboard", i.e. siblings and direct child pages.
It does not trigger on navigation to any descendant that is not a direct child of the loading.tsx location (e.g. /dashboard/overview).
Is this the expected behaviour? If so, is there a reason behind it that I'm not fully understanding?
I appreciate I can litter loading.tsx everywhere but that seems unnecessary boilerplate.
2 Replies
OcicatOP
https://nextjs.org/docs/app/api-reference/file-conventions/loading#instant-loading-states
The documentation here states:
"It will automatically wrap the page.js file and any children below in a <Suspense> boundary."
Is the children part read literally? If so I feel this needs greater clarification.
The documentation here states:
"It will automatically wrap the page.js file and any children below in a <Suspense> boundary."
Is the children part read literally? If so I feel this needs greater clarification.
OcicatOP
I have tested error.tsx under the same conditions, and this behaves as i'd expect. An uncaught error is caught by the nearest ancestor error.tsx, regardless of depth.