Next.js Discord

Discord Forum

Loading.tsx file applying for the whole folder

Answered
Satin Angora posted this in #help-forum
Open in Discord
Satin AngoraOP
the loading.tsx for /products/ is also showing when i access /products/slug, how do I prevent this?
Answered by Ray
create /products/slug/loading.tsxor create the product slug page in a route group if it doesn't need a loading.tsx eg. /(product-slug)/products/slug/page.tsx
View full answer

8 Replies

@Satin Angora the loading.tsx for /products/ is also showing when i access /products/slug, how do I prevent this?
create /products/slug/loading.tsxor create the product slug page in a route group if it doesn't need a loading.tsx eg. /(product-slug)/products/slug/page.tsx
Answer
Oh, I had this happen with:

/app/(admin)/app/clients/ here I have a page.tsx and a loading.tssx

But I still have:

/app/(admin)/app/clients/form/[[...id]] with another loading.tsx and page.tsx

So what your saying is that I need to remove the nested routes by doing this:
/app/(admin)/app/(client-form)/clients/form/[[...id]]

Did I understand it correctly @Ray ?
Thank you. I came here in hopes of helping someone and I ended up learning. hahah that's great.
It uses 'both' like the 'list' loading state and than the form loading state. I'm moving out of the nested route right now so I can have only one loading.tsx when entering a form
oh yeah
It worked just like you said @Ray ✅ You're the boss man