Root loading sometimes overwrites nested loadings
Answered
Japanese littleneck posted this in #help-forum
Japanese littleneckOP
In my Nextjs 14 project I have different loading state that applies to all project routes, but in some routes I have nested loadings, but sometimes the root/parent loading is overwriting the child/nested loading, for example:
the problem here is sometimes
/app
layout.tsx
loading.tsx // parent
/branches
loading.tsx // nested 1
page.tsx
/services
loading.tsx // nested 2
page.tsxthe problem here is sometimes
/app/loading.tsx is used instead of /app/services/loading.tsx when I'm in route /services, it happens sometimes and sometimes not, not sure how it works exactly and why it happens only sometimes, any solution please? I need to force only nested loading instead of parent if I'm in a route that has a nested loadingAnswered by Plague
Yeah this seems pretty common, and while frustrating it makes sense why this happens, the root
A way to force the nested
Unfortunately, I don't know of any other way to bypass this behavior and I too find it pretty annoying. Although I only see this in production for fully dynamic routes using dynamic rendering.
loading.tsx wraps all pages of the application so that renders first then the nested loading.tsx replaces it when that renders, but, depending on how fast/slow your page load is you can somtimes see the nested loading and somtimes not.A way to force the nested
loading.tsx to be the only one that shows is to use [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) depending on your file structure, however, this isn't always ideal for all situations and sometimes might not even be possible for some structures. Unfortunately, I don't know of any other way to bypass this behavior and I too find it pretty annoying. Although I only see this in production for fully dynamic routes using dynamic rendering.
4 Replies
Yeah this seems pretty common, and while frustrating it makes sense why this happens, the root
A way to force the nested
Unfortunately, I don't know of any other way to bypass this behavior and I too find it pretty annoying. Although I only see this in production for fully dynamic routes using dynamic rendering.
loading.tsx wraps all pages of the application so that renders first then the nested loading.tsx replaces it when that renders, but, depending on how fast/slow your page load is you can somtimes see the nested loading and somtimes not.A way to force the nested
loading.tsx to be the only one that shows is to use [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) depending on your file structure, however, this isn't always ideal for all situations and sometimes might not even be possible for some structures. Unfortunately, I don't know of any other way to bypass this behavior and I too find it pretty annoying. Although I only see this in production for fully dynamic routes using dynamic rendering.
Answer
Perhaps this will be fixed with PPR, but, we'll have to wait and see
@Japanese littleneck post is a bit old so I forgot to ping you so you'll see this.
Japanese littleneckOP
Yeah it seems that Route Groups might be the only solution, but for me it's not what I want, I might as well leave it as is rather than having to change my file structure.
Hopefully it gets fixed soon, I didn't find many people talking about this issue, wonder why 😅
anyway, thanks @Plague ! 😇
Hopefully it gets fixed soon, I didn't find many people talking about this issue, wonder why 😅
anyway, thanks @Plague ! 😇