Implementing Specific Part Loaders
Until now, we have been streaming entire pages. However, we can be more detailed by using React Suspense to stream specific components.
Suspense lets us delay showing parts of your app until a specific condition is met, like when data is loaded. Just wrap the dynamic components in Suspense and provide a temporary component to display while the dynamic part loads. To make this happen, move the data fetching into the component.
Back to the Project
Delete fetchIncome() and its data from app/dashboard/(overview)/page.tsx:
Import <Suspense> from React and wrap the <IncomeChart/> with it. We can pass a fallback component called <IncomeChartSkeleton>.
Finally, we should update the <IncomeChart> component to fetch its own data and remove the prop passed to it:
Now, refresh the live page; you should notice a skeleton loader on the chart place while data is loading.
In Practice
Important: We don't need to move the layout.tsx file to the (overview) folder as shown in the video.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
What should I do if the skeleton loader does not appear when loading the chart?
Can you explain how Suspense works with server components in this context?
Is there anything else I need to update in the dashboard after these changes?
Awesome!
Completion rate improved to 2.08Implementing Specific Part Loaders
Sveip for å vise menyen
Until now, we have been streaming entire pages. However, we can be more detailed by using React Suspense to stream specific components.
Suspense lets us delay showing parts of your app until a specific condition is met, like when data is loaded. Just wrap the dynamic components in Suspense and provide a temporary component to display while the dynamic part loads. To make this happen, move the data fetching into the component.
Back to the Project
Delete fetchIncome() and its data from app/dashboard/(overview)/page.tsx:
Import <Suspense> from React and wrap the <IncomeChart/> with it. We can pass a fallback component called <IncomeChartSkeleton>.
Finally, we should update the <IncomeChart> component to fetch its own data and remove the prop passed to it:
Now, refresh the live page; you should notice a skeleton loader on the chart place while data is loading.
In Practice
Important: We don't need to move the layout.tsx file to the (overview) folder as shown in the video.
Takk for tilbakemeldingene dine!
