Parent Route Loading Component Displays (And Jump) Before Dynamic Route's Loading Component

[eyalcohen4]

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 own 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 milisecond 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 loading component.

Repo: https://github.com/eyalcohen4/nextjs-loading-with-nested-routes

Video

nextjs-bug2.mp4

Additional information

No response

Example

https://github.com/eyalcohen4/nextjs-loading-with-nested-routes

[miguelvalmeida]

I am also facing the same "issue".

The loading component from one of my routes (/account/profile) briefly appears before the loading component of my dynamic route (/account/profile/edit/[field]).

If i move the loading component outside of the dynamic route (/account/profile/edit) then the loading component from the parent route (/account/profile) no longer appears, but in my case i need it inside the dynamic route because of a page layout i have defined there.

Last tested this on version "14.1.3" (also gave it a try in the last canary release "14.2.0-canary.22" but same result).

Curious to know if this is by design or a bug.

[aeroxee]

Yes, I have the same problem as you. That possibility wins the default Loading design from next.js.

[rubeonline]

Any news on that? I´m experience the same issue. But only the first time. The other times it works like expected.