Loading.tsx files dont works with nested routes

[Laguilavo10]

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

1. Starts in /home
2. Change To /home/nested by the link
3. Change To /page-same-level by the link

Current 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

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 8044
  Available CPU cores: 8
Binaries:
  Node: 20.15.1
  npm: N/A
  Yarn: N/A
  pnpm: 8.4.0
Relevant Packages:
  next: 14.2.3
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

[ztanner]

Hi @Laguilavo10 - thanks for the report.

The issue in your reproduction is expected behavior with React. React will never hide a component that's already loaded. In this case, home/loading.tsx applies to the layout in the home directory. When you navigate to the /home/nested directory, Next.js will keep home/layout.tsx mounted so that it doesn't need to re-render it as a performance optimization. Since the <Suspense> boundary that renders the loading state isn't re-mounted, it won't be re-triggered when you navigate to the /home/nested route. In your example, you'd need to add a loading.tsx component to your nested directory.

[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.