Optimierung von Ladeprozessen durch Komponenten-Gruppierung

Wie sieht es mit den Card-Komponenten aus? Sollten wir für jede Karte einen Loader hinzufügen oder wie sollte diese Komponente behandelt werden?

Beim Abrufen von Daten für einzelne <Card>-Komponenten kann ein mögliches Problem auftreten – das separate Laden jeder Karte kann einen Pop-Effekt verursachen, wenn sie erscheinen. Diese plötzliche visuelle Veränderung kann für Nutzer störend sein.

Um dieses Problem zu vermeiden, sollten im page.tsx-File die folgenden Schritte berücksichtigt werden.

Zurück zum Projekt

• Die <Card>-Komponenten löschen;
• Die Funktion fetchCardData() löschen;
• Eine neue Wrapper-Komponente namens <CardWrapper /> importieren;
• Eine neue Skeleton-Komponente namens <CardsSkeleton /> importieren;
• <CardWrapper /> in Suspense einbetten.

• Navigiere zu app/ui/dashboard/cards.tsx;
• Importiere fetchCardData();
• Rufe fetchCardData() innerhalb der Komponente <CardWrapper/> auf;
• Kommentiere den notwendigen Code ein.

In der Praxis