Can I add a loading state for a server component while awaiting for data
Answered
Seppala Siberian Sleddog posted this in #help-forum
Seppala Siberian SleddogOP
I have this example code
But it's not showing the fallback, why is that?
try {
const { data, noOfRecords } = await new Job().getAll();
return (
<>
<Suspense fallback={<h1>Loading...</h1>}>
<JobTable jobs={data} />
</Suspense>
</>
);
} catch (error) {
return <></>;
}But it's not showing the fallback, why is that?
Answered by B33fb0n3
it's not showing, because your fetch is outside of the suspense. Try to use a loading.js (that wraps everything inside a suspense boundary)
12 Replies
it's not showing, because your fetch is outside of the suspense. Try to use a loading.js (that wraps everything inside a suspense boundary)
Answer
@B33fb0n3 it's not showing, because your fetch is outside of the suspense. Try to use a loading.js (that wraps everything inside a suspense boundary)
Seppala Siberian SleddogOP
But what if I wanted to show different suspense for different component on the same level?
then you CAN use route groups for it or (and my recommendation) use a layout.js for content that does not change over time and a suspense boundaries there and inside them your components. If you don't want to include it inside your layout.js, you can do the same inside your page.js
@B33fb0n3 then you CAN use route groups for it or (and my recommendation) use a layout.js for content that does not change over time and a suspense boundaries there and inside them your components. If you don't want to include it inside your layout.js, you can do the same inside your page.js
Seppala Siberian SleddogOP
In that case every component I should add the fetch inside it?
I have ths same data being shared with different components with diffrenet view like table, card ...etc
And I want to show a custom suspense for each one
and pass them the data as props without calling directly on the component level
yes, fetch it in every component. But watch out, that you wrap your function to fetch (the same) data inside a react.cache, to have memorized callbacks during rendering
Seppala Siberian SleddogOP
Okay, thanks I will look into that
happy to help. Please mark solution
@joulev