loading.tsx ignored when using dynamic routes

[Re4GD]

When using dynamic routes, the dynamic route loading state looks for the closest parent loading state. That causes the routes under the dynamic route to render the parent loading.tsx rather than their own loading.tsx

We have these files:
app/dashboard/loading.tsx
app/dashboard/[slug]/monitor/page.tsx
app/dashboard/[slug]/monitor/loading.tsx

-> when routing to app/dashboard/[slug]/monitor/page.tsx, the corresponding app/dashboard/[slug]/monitor/loading.tsx does not get loaded. Rather, the dashboard app/dashboard/loading.tsx gets loaded, which is the nearest parent loading.tsx for [slug] folder.

Shoud I open a bug report or am I missing something?

[assa1605]

I am also facing the same issue.

[jstoxrocky]

I am also experiencing this issue.

[jstoxrocky]

@Re4GD have you opened an issue?

[jstoxrocky]

Someone else has: #56344

[nickfujita]

In case anyone is looking for a temp workaround. Using the Suspense fallback pattern appears to work instead of using the loading.tsx file. Just rename loading.tsx to something like LoadingUI.tsx

For example:

import { Suspense } from 'react';
import RouteComponent from './RouteComponent';
import LoadingUI from './LoadingUI';

export default function MyRoute() {
  return (
    <Suspense fallback={<LoadingUI />}>
      <RouteComponent />
    </Suspense>
  );
}

[Ahsan-Ullah1871]

I'm having the same issue with loading text. I think it's a problem on this loading part.

[DKprofile]

So i found workaround for this behavior

At first i had such folder structure
/app/(home)/page.tsx
/app/(home)/loadertsx
/app/product/[id]/page.tsx
/app/product/[id]/loader.tsx

When i navigated to /product/1/ by clicking on link component, i got no loader and just waited for the page to fetch all its content, so user did not see a loader, but when i navigated from /product/1/ to /, i saw a loader for a home page

To fix it i made folder structure to look like this:
/app/(home)/page.tsx
/app/(home)/loader.tsx
/app/product/[id]/page.tsx
/app/product/loader.tsx

I moved loader into /product

And i added a key to the <Link key={path} href={path} /> component

After this changes loader for /product/1 renders instantly