Next.js Discord

Discord Forum

Loading.tsx didnt work on nested routes

Unanswered
Gharial posted this in #help-forum
Open in Discord
GharialOP
Hi people, a doubt regarding the nextjs loading file, I have it in a folder above and it works with the pages of that level, however the pages that are more nested the loading is not seen. Does anyone know why? It is supposed that the higher the file is the more pages it covers.

9 Replies

GharialOP
I have this sandbox https://codesandbox.io/p/live/388711f6-476a-4f71-a0b0-2977d3d4ed04
Basically, I notice 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/nestedthe loading is shown and then I go to /home it is no longer shown.
Spectacled bear
Try adding a loading.tsx file within the nested route too. The file basically just adds a Suspense around the route. But if you're navigating within the parent route, it will only use it on first load. So add a loading.tsx within home/nested.
@Gharial Thx, it works, however, it would be an issue of NextJs to solve in future releases or this is expected performance?
GharialOP
I suposed If I have more nested routes I would need more loading files
@Gharial Thx, it works, however, it would be an issue of NextJs to solve in future releases or this is expected performance?
Spectacled bear
This is expected. As I mentioned, the loading.tsx files just wraps the route with a <Suspense>. So it's really just the way Suspense works.
@Gharial I suposed If I have more nested routes I would need more loading files
Spectacled bear
Yes, that is the case.