Що стосується компонентів Card, чи потрібно додавати завантажувач для кожної картки, або як краще обробити цей компонент.

Під час отримання даних для окремих компонентів <Card> може виникнути потенційна проблема — завантаження кожної картки окремо може спричинити ефект спливання під час їх появи. Така раптова візуальна зміна може бути неприємною для користувачів.

Щоб уникнути цієї проблеми, розгляньте наступні кроки у файлі page.tsx.

Повернення до проєкту

• Видалити компоненти <Card>;
• Видалити функцію fetchCardData();
• Імпортувати новий обгортковий компонент під назвою <CardWrapper />;
• Імпортувати новий компонент скелетону під назвою <CardsSkeleton />;
• Обгорнути <CardWrapper /> у Suspense.

• Перейдіть до app/ui/dashboard/cards.tsx;
• Імпортуйте fetchCardData();
• Викличте fetchCardData() всередині компонента <CardWrapper/>;
• Розкоментуйте необхідний код.

На практиці