Doesn't loading.js work on child routes with the same parent?
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
layout.tsx
page.tsx
loading.tsx
├── parent1
│ ├── child1
│ └── child2
├── parent2
│ ├── child1
│ └── child2When there is a structure like the above, loading.tsx works when moving from
/ to /parent1/child1. However, it does not work when moving from
/parent1/child1 to /parent1/child2 (if the 1 depth from loading.tsx is the same).Is this the intended behavior?
7 Replies
Loading is a suspense Wrapper, which is triggered on rerender
Your layout page (which is your suspense children) is not rerenderer when you jump from child 1 to child 2, that's why it's not triggered again
Your layout page (which is your suspense children) is not rerenderer when you jump from child 1 to child 2, that's why it's not triggered again
Asian black bearOP
I don't quite understand. 🤔
rerender layout is not a problem, cause Suspense render fallback when children are pending.
rerender layout is not a problem, cause Suspense render fallback when children are pending.
Also, if the problem is that the layout is already rendered, it should not work in the following situations.
But it works on
​
But it works on
/parent1/child1 => /parent2/child1.​
Answer
I think that's what's you are searching, for the parent1 => parent2 working, i would say that it's because changing route trigger hard navigation, but i am absolutely not sure for this
Asian black bearOP
ok i got the problem
next.js give each path segment to the key of TemplateContext.
it leads not resetting suspense when parent paths are same.
thanks for help ðŸ™
next.js give each path segment to the key of TemplateContext.
it leads not resetting suspense when parent paths are same.
thanks for help ðŸ™
Okay so it was not layout not rerendering, but the key shared by folders ? Okay thanks for letting me know !