Loading.tsx files dont works with nested routes #67923
Labels
bug
Issue was opened via the bug report template.
Lazy Loading
Related to Next.js Lazy Loading (e.g., `next/dynamic` or `React.lazy`).
locked
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/loading-file-test-fkdvwc?file=%2Fapp%2F%28pages%29%2Fhome%2Fpage.tsx&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyqj4nd30006356jsfx76aw3%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyqj4nd30002356j5hfiqt8g%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyqj4nd30004356jmzksbm6w%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyqj4nd30005356j4ymralj7%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyqj4nd30002356j5hfiqt8g%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyqj4nd30001356j53m2gs6v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clyqkgfji0002356jywkcymm1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A36%252C%2522startColumn%2522%253A14%252C%2522endLineNumber%2522%253A36%252C%2522endColumn%2522%253A14%257D%255D%252C%2522filepath%2522%253A%2522%252Fapp%252Flayout.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clyrkoa0y0002356kwu7rwvx6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fapp%252F%28pages%29%252Fhome%252Fpage.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clyqj4nd30002356j5hfiqt8g%2522%252C%2522activeTabId%2522%253A%2522clyrkoa0y0002356kwu7rwvx6%2522%257D%252C%2522clyqj4nd30005356j4ymralj7%2522%253A%257B%2522id%2522%253A%2522clyqj4nd30005356j4ymralj7%2522%252C%2522activeTabId%2522%253A%2522clyqj4s490020356jo9m0vual%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clyqj4s490020356jo9m0vual%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252Fhome%2522%257D%255D%257D%252C%2522clyqj4nd30004356jmzksbm6w%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyqj4nd30003356jfc3w23d6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clyqj4nd30004356jmzksbm6w%2522%252C%2522activeTabId%2522%253A%2522clyqj4nd30003356jfc3w23d6%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A24.479166666666657%257D
To Reproduce
/home
/home/nested
by the link/page-same-level
by the linkCurrent vs. Expected behavior
I expected that having a loading.tsx file should cover all pages that are a server component to show the loader whenever the page loads the content.
But I observed that if the navigation goes from pages at the same level, e.g.
/home
to/page-same-level
, the loading works correctly, but if I go from/home
to/home/nested
or vice versa, the loading.tsx is loaded only once. Similarly, if I start in/home/nested
the loading is shown and then I go to/home
it is no longer shown. Basically the loader is not displayed if you navigate between nested paths.Provide environment information
Which area(s) are affected? (Select all that apply)
Lazy Loading
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)
Additional context
No response
The text was updated successfully, but these errors were encountered: