The issue reports inconsistent loading.js behavior in nested routes compared to layout.js.
The issue describes inconsistent behavior where root loading.js doesn't work when navigating between nested routes, while layout.js does. The problem requires understanding Next.js routing and loading mechanisms, but the reproduction steps are clear. The main challenge is determining if this is intended behavior or a bug that needs fixing in the routing logic.
https://codesandbox.io/p/devbox/root-loading-nested-routes-wzthqy
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:
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 loading.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!
latest, canary and I think everywhere
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!