loading.tsx vs suspense
Unanswered
Jumbo flying squid posted this in #help-forum
Jumbo flying squidOP
Hey guys! I'm curious when folks use loading.tsx vs wrapping in suspense. I found myself having to dupe a lot of code when using loading.tsx. Instead, it seems cleaner to wrap async functions in suspense instead so I don't have to dupe static components. Is this correct? When do yall use loading.tsx?
16 Replies
Jumbo flying squidOP
it seems like loading.tsx is best to handle navigating to new paths where the server has to fetch the page
and is loading.tsx/suspense the right way to deal with loading times while navigating between pages?
Donskoy
In new versions we have to add a file loading.tsx or jsx in components. I am new to next js but still adding my view.
so which will show loading when navigating.
Jumbo flying squidOP
something interesting i noticed also is higher level loading.tsx files will render first, then the child loading.tsx, then finally the component
this behavior seems strange as you show different loading states
well it should be as straight forward as that. Loading.tsx is a per navigation loading state, while using suspense, you can display skeletons per suspensed components.
sometimes you want to display a app wide loading.tsx with fancy animation, youd go for loading.tsx
Jumbo flying squidOP
makes sense okay thanks! What about the stacked loading states? Is that intended behavior
yeah it is
i havent really delve into that in detail but im sure you can preload some async function at the top level if you only want to show the top level loading page
what im trying to say is that you can "control" when the async loading happens
Jumbo flying squidOP
not sure i follow that
@Jumbo flying squid not sure i follow that
if you wrap your async function with Suspense without fallback, then it should use the nearest suspense with falback, which might be your loading.tsx
@Jumbo flying squid Hey guys! I'm curious when folks use loading.tsx vs wrapping in suspense. I found myself having to dupe a lot of code when using loading.tsx. Instead, it seems cleaner to wrap async functions in suspense instead so I don't have to dupe static components. Is this correct? When do yall use loading.tsx?
I also felt this code duplication issue of static content.
But it helps to have loading.tsx when I want to fetch some data in the page.tsx itself as until that fetch completes my loading.tsx can be rendered.
But it helps to have loading.tsx when I want to fetch some data in the page.tsx itself as until that fetch completes my loading.tsx can be rendered.
Jumbo flying squidOP
yeah makes sense. Also I dont think we can get around the double loading. Since its wrapping two layered suspend boundaries, itll always haev to run both