Is `loading.tsx` in the root of my Next.js project bad practice?
I just spend hours debugging an issue I had with
router.refresh() - I was using UploadThing and I'd call router.refresh() inside of onClientUploadComplete to update the UI with the documents the user had uploaded. I would fetch the documents in the page (server component).
This was causing the entire page to refresh and scrollbar to be reset etc.
I eventually found that if I deleted the ROOT loading.tsx file, the router.refresh() wouldn't refresh the entire page - only the components that used the data I needed.
Obviously I now no longer have a global loading state, and probably need to rewrite a lot of stuff to have page-specific loading.tsx files or add Suspense boundries to the specific components, but it seems like a root loading.tsx caused issues for me.
Wondering if it should generally be avoided or if it's fine to use? (Ofc it is fine to use, but this interaction with router.refresh makes me want to avoid it.)0 Replies