Tähän asti olemme suoratoistaneet kokonaisia sivuja. Voimme kuitenkin olla tarkempia käyttämällä Reactin Suspense-ominaisuutta suoratoistaaksemme yksittäisiä komponentteja.

Suspense mahdollistaa sovelluksen osien näyttämisen viiveellä, kunnes tietty ehto täyttyy, kuten datan latautuminen. Kääri dynaamiset komponentit Suspense-rakenteeseen ja tarjoa väliaikainen komponentti näytettäväksi dynaamisen osan latautuessa. Tämän toteuttamiseksi siirrä datan haku komponentin sisälle.

Takaisin projektiin

Poista fetchIncome() ja siihen liittyvät tiedot tiedostosta app/dashboard/(overview)/page.tsx:

Tuo <Suspense> Reactista ja ympäröi <IncomeChart/> sillä. Voit välittää sille varakomponentin nimeltä <IncomeChartSkeleton>.

Lopuksi päivitä <IncomeChart>-komponentti hakemaan omat tietonsa ja poista sille välitetty prop.

Päivitä nyt live-sivu; sinun pitäisi huomata luurankolataaja kaavion kohdalla datan latautuessa.

Käytännössä

Tärkeää: Meidän ei tarvitse siirtää layout.tsx-tiedostoa (overview)-kansioon, kuten videossa näytetään.