Root loading.js doesn't work when navigating in nested routes (e.g. navigating from child to grandchild route)

[nicolo-tito]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/root-loading-nested-routes-wzthqy

To Reproduce

1. Start the application
2. Navigate to child route (root loading.js will be used as loading UI)
3. Navigate from child route to grandchild route (root loading.js will not be used as loading UI)

Current vs. Expected behavior

Based on (my understanding of) the docs, I would expect for loading.js to behave in a similar way as layout.js and error.js. In my example, the root layout.js is used for nested routes at any level (as expected), and I would expect for the root loading.js to work as a loading UI for all nested routes. Instead, loading.js works only for the route where it's placed and direct navigation from it, while it doesn't work when navigating from child to grandchild routes.

So, to sum up:

• navigating from root to child route -> root loading.js is used
• navigating directly from root to grandchild route -> root loading.js is used
• navigating from child route to grandchild route -> root loading.js is not used

If this is working as intended, please disregard my issue, but I would suggest to make this clearer in the docs here. On top of that, I think that having the root loading.js to work as a fallback loading UI for the entire application (unless it's overrun by another loading.js down in the routes structure) would be very useful and expected by many, since it feels more consistent with layout.js and error.js behaviour. As of now, for a generic loading UI, we need to copy the same layout.js through all the app, which is not ideal (and leads to swapping from a loading.js to another loading.js when the latter is loaded, but this is another issue). Many thanks!

Provide environment information

latest, canary and I think everywhere in general

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.11.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

No response

_NEXT-3292

[italonolasco]

Had the same problem here. I see this as a bug, like you. My understanding reading the doc is the same.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[nicolo-tito]

This is still relevant on 14.1.1-canary.56

[martinezguillaume]

I'm encountring the same issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[fgcoelho]

Same issue here.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!