Hoe zit het met de Card-componenten, moeten we voor elke kaart een loader toevoegen of hoe pakken we deze component aan?

Bij het ophalen van data voor individuele <Card>-componenten kan er een potentieel probleem ontstaan: het afzonderlijk laden van elke kaart kan een popping effect veroorzaken wanneer ze verschijnen. Deze plotselinge visuele verandering kan storend zijn voor gebruikers.

Om dit probleem te beperken, overweeg de volgende stappen in het bestand page.tsx.

Terug naar het project

• Verwijder de <Card>-componenten;
• Verwijder de functie fetchCardData();
• Importeer een nieuwe wrappercomponent genaamd <CardWrapper />;
• Importeer een nieuw skeletcomponent genaamd <CardsSkeleton />;
• Omwikkel <CardWrapper /> met Suspense.

• Navigeer naar app/ui/dashboard/cards.tsx;
• Importeer fetchCardData();
• Roep fetchCardData() aan binnen de <CardWrapper/> component;
• Zet de benodigde code terug uit commentaar.

In de praktijk