Implementazione di Loader per Parti Specifiche
Fino ad ora, abbiamo trasmesso intere pagine. Tuttavia, possiamo essere più dettagliati utilizzando Suspense di React per trasmettere componenti specifici.
Suspense consente di ritardare la visualizzazione di parti dell'applicazione fino al soddisfacimento di una determinata condizione, come il caricamento dei dati. Basta racchiudere i componenti dinamici in Suspense e fornire un componente temporaneo da mostrare mentre la parte dinamica viene caricata. Per ottenere questo risultato, spostare il recupero dei dati all'interno del componente.
Ritorno al progetto
Eliminare fetchIncome() e i relativi dati da app/dashboard/(overview)/page.tsx:
Importa <Suspense> da React e avvolgi <IncomeChart/> con esso. È possibile passare un componente di fallback chiamato <IncomeChartSkeleton>.
Infine, è necessario aggiornare il componente <IncomeChart> affinché recuperi i propri dati e rimuovere la prop che gli veniva passata:
Ora, aggiorna la pagina live; dovresti notare un caricatore scheletrico al posto del grafico mentre i dati vengono caricati.
In pratica
Importante: non è necessario spostare il file layout.tsx nella cartella (overview) come mostrato nel video.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain how Suspense improves the user experience in this scenario?
What should I do if the skeleton loader does not appear when the data is loading?
Is there anything else I need to update in other components to support Suspense?
Awesome!
Completion rate improved to 2.08Implementazione di Loader per Parti Specifiche
Scorri per mostrare il menu
Fino ad ora, abbiamo trasmesso intere pagine. Tuttavia, possiamo essere più dettagliati utilizzando Suspense di React per trasmettere componenti specifici.
Suspense consente di ritardare la visualizzazione di parti dell'applicazione fino al soddisfacimento di una determinata condizione, come il caricamento dei dati. Basta racchiudere i componenti dinamici in Suspense e fornire un componente temporaneo da mostrare mentre la parte dinamica viene caricata. Per ottenere questo risultato, spostare il recupero dei dati all'interno del componente.
Ritorno al progetto
Eliminare fetchIncome() e i relativi dati da app/dashboard/(overview)/page.tsx:
Importa <Suspense> da React e avvolgi <IncomeChart/> con esso. È possibile passare un componente di fallback chiamato <IncomeChartSkeleton>.
Infine, è necessario aggiornare il componente <IncomeChart> affinché recuperi i propri dati e rimuovere la prop che gli veniva passata:
Ora, aggiorna la pagina live; dovresti notare un caricatore scheletrico al posto del grafico mentre i dati vengono caricati.
In pratica
Importante: non è necessario spostare il file layout.tsx nella cartella (overview) come mostrato nel video.
Grazie per i tuoi commenti!
