До цього моменту ми транслювали цілі сторінки. Однак можна бути більш деталізованими, використовуючи React Suspense для потокової передачі окремих компонентів.

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

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

Видаліть fetchIncome() та його дані з app/dashboard/(overview)/page.tsx:

Імпортуйте <Suspense> з React і обгорніть ним <IncomeChart/>. Можна передати компонент-заповнювач під назвою <IncomeChartSkeleton>.

Після цього необхідно оновити компонент <IncomeChart>, щоб він самостійно отримував свої дані, і видалити пропс, який передавався йому:

Тепер оновіть сторінку; ви побачите скелетон-завантажувач на місці графіка під час завантаження даних.

На практиці

Важливо: Не потрібно переносити файл layout.tsx до папки (overview), як показано у відео.