Parent Route Loading Component Displays (And Jump) Before Dynamic Route's Loading Component
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
Summary
It might be an issue with my understanding, so would love to get any feedback here.
I'm working on a Next.js 14 application with app router enabled.
The application consists of a root route (/), a static subroute (/subroute), and a dynamic subroute (/subroute/[dynamic]). Each route has its loading.tsx file.
The Issue
When clicking on a link that navigates to the dynamic route (/subroute/[dynamic]), where the dynamic segment is generated using Math.random(), the loading component from the root route (/) is rendered for a millisecond before loading component specific to the dynamic route.
Per my understanding, the loading component defined for the dynamic route should be displayed when navigating to it, not the root route's loading component.
Steps to Reproduce:
Start the Next.js application with the app router enabled.
On the homepage, click the link to navigate to the dynamic subroute (/subroute/[dynamic]).
Observe that the root route's loading component is rendered instead of the dynamic route's.
Discussion on GitHub: https://github.com/vercel/next.js/discussions/62275
Repository: https://github.com/eyalcohen4/nextjs-loading-with-nested-routes
It might be an issue with my understanding, so would love to get any feedback here.
I'm working on a Next.js 14 application with app router enabled.
The application consists of a root route (/), a static subroute (/subroute), and a dynamic subroute (/subroute/[dynamic]). Each route has its loading.tsx file.
The Issue
When clicking on a link that navigates to the dynamic route (/subroute/[dynamic]), where the dynamic segment is generated using Math.random(), the loading component from the root route (/) is rendered for a millisecond before loading component specific to the dynamic route.
Per my understanding, the loading component defined for the dynamic route should be displayed when navigating to it, not the root route's loading component.
Steps to Reproduce:
Start the Next.js application with the app router enabled.
On the homepage, click the link to navigate to the dynamic subroute (/subroute/[dynamic]).
Observe that the root route's loading component is rendered instead of the dynamic route's.
Discussion on GitHub: https://github.com/vercel/next.js/discussions/62275
Repository: https://github.com/eyalcohen4/nextjs-loading-with-nested-routes