Nextjs 13.5.4: Parent loading page is overwriting child loading page

Question

I'm using nextjs 13.5.4 with app router. I'm trying to implement different loading.tsx for every page but problem is the parent loading.tsx style is always showing while rendering nested pages with it's own loading.tsx. so when i render a nested page there are multiple loading pages applying before the data been fetch.

Answer 1

You need to use a route group (folder with parenthesis) to make sure that the loading only applies to that route/page. I had the same problem where the parent route loading.tsx was also showing when loading its dynamic child route.

Before

/jobs
  layout.tsx
  loading.tsx
  page.tsx
  /[jobId]
    layout.tsx
    page.tsx

After

/jobs
  layout.tsx
  /(jobs)
    loading.tsx
    page.tsx
  /[jobId]
    layout.tsx
    page.tsx

This will ensure that the loading.tsx only applies to its own route and not nested routes.