I have the following App router folder structure:

/slideshows
/slideshows/[name] (folder for individual slideshow)
/slideshows/[name]/play/page.tsx (play individual slideshow)
/slideshows/[name]/play/loading.tsx (instant loading)
/slideshows/page.tsx (list all slideshows)
/slideshows/loading.tsx (skeleton loading for the list of slideshows)
/slideshows/layout.tsx

When I navigate to /slideshows, it shows the correct loading.tsx for that page. If I then click on an individual slideshow that I want to play, it shows the loading.tsx from /slideshows/loading.tsx, but not the one inside /slideshows/[name]/loading.tsx, but it does render it at the end of the loading. It looks really odd.

My question is this: Why does it show loading for /slideshows when I'm navigating to /slideshows/[name]/play?

I'm running on NextJS 14.1.0, all of the page.tsx, layout.tsx and loading.tsx are RSC.