How to separate the loading.jsx file in App Routes?

Question

Situation:
I have route like: blog/[blog_id]
and file structure like blog->(page.jsx,loading.jsx), blog/[blog_id] -> (page.jsx,loading.jsx)
Question:
when I go to blog/[blog_id] as a detail page, first comes the blog/loading, then blog/[blog_id]/loading
Actually, the blog/loading is not suitable for detail page.

How to avoid the blog/loading?

Icelandic Sheepdog · Answer

Solution: Use Route Groups to isolate loading statesCreate route groups to prevent loading state inheritance:app/
├── blog/
│   └── (list)/
│       ├── page.jsx                // Blog list at /blog
│       └── loading.jsx             // Only for list
└── blog/
    └── [blog_id]/
        ├── page.jsx                // Blog detail
        └── loading.jsx             // Only for detailAsk claude4.0 and it seems work

How to separate the loading.jsx file in App Routes?

1 Reply