Loading.tsx Best Practices
Answered
Common carp posted this in #help-forum
Common carpOP
Hello! I wanted to know if there is a way to declare a fallback loading.tsx so I would not need to add loading.tsx files in all routes. I tried to place it in the
I am kinda okay with adding it in all routes. However, I am just curious if there is a better way of doing it? Thank you for those who will reply.
appI am kinda okay with adding it in all routes. However, I am just curious if there is a better way of doing it? Thank you for those who will reply.
Answered by luis_llanes
Don’t worry, I would say that having multiple loading.tsx is actually the best practice… at least on every layout having a different loading.tsx is always best to not fallback to the root loading and suspending the whole tree, rather you only suspend the specific container of the leaf page
18 Replies
Chub mackerel
once I used a
this not working on your case?
loading.tsxin a route (/chat) and it applied to all child routes too. this not working on your case?
@Chub mackerel once I used a `loading.tsx `in a route (/chat) and it applied to all child routes too.
this not working on your case?
Common carpOP
unfortunately, it didn't. I will try to send a screenshot/video to show it better
It should not be in the src/ directory. It should be inside the app/ directory
Next to the layout.tsx
Common carpOP
Ah sorry, it is in the app directory. I will edit my post
Should work now if your components trigger it via an async task
Don’t worry, I would say that having multiple loading.tsx is actually the best practice… at least on every layout having a different loading.tsx is always best to not fallback to the root loading and suspending the whole tree, rather you only suspend the specific container of the leaf page
Answer
Common carpOP
So basically, you also only place it in the app folder only? and if ever you need a different loading.tsx for a particular route, it is that time when you add another loading.tsx specific to that route folder?
@luis_llanes Don’t worry, I would say that having multiple loading.tsx is actually the best practice… at least on every layout having a different loading.tsx is always best to not fallback to the root loading and suspending the whole tree, rather you only suspend the specific container of the leaf page
Common carpOP
Cool, thank you for this
Specific to that route. Always try to place them next to the layouts and you’ll be good
Common carpOP
Thank you! This is answered.
Sure! Glad I could help :’)
Common carpOP
How do I mark this as answered?
Idk lol I’ve never marked one as answered lol
Original message was deleted
Check this out
Common carpOP
Thanks @luis_llanes
@Common carp Thanks <@744377057139753020>
You’re welcome! If you need any more help with Next.js and React stuff let me know