Implementando Carregadores de Partes Específicas
Até agora, transmitimos páginas inteiras. No entanto, podemos ser mais detalhados utilizando o React Suspense para transmitir componentes específicos.
O Suspense permite adiar a exibição de partes do seu aplicativo até que uma condição específica seja atendida, como quando os dados são carregados. Basta envolver os componentes dinâmicos em Suspense e fornecer um componente temporário para exibir enquanto a parte dinâmica é carregada. Para isso, mova a busca de dados para dentro do componente.
De volta ao projeto
Exclua fetchIncome() e seus dados de app/dashboard/(overview)/page.tsx:
Importar <Suspense> do React e envolver o <IncomeChart/> com ele. É possível passar um componente de fallback chamado <IncomeChartSkeleton>.
Por fim, é necessário atualizar o componente <IncomeChart> para buscar seus próprios dados e remover a prop anteriormente passada:
Agora, ao atualizar a página ao vivo, deve-se notar um skeleton loader no local do gráfico enquanto os dados estão sendo carregados.
Na Prática
Importante: Não é necessário mover o arquivo layout.tsx para a pasta (overview) como mostrado no vídeo.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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.08Implementando Carregadores de Partes Específicas
Deslize para mostrar o menu
Até agora, transmitimos páginas inteiras. No entanto, podemos ser mais detalhados utilizando o React Suspense para transmitir componentes específicos.
O Suspense permite adiar a exibição de partes do seu aplicativo até que uma condição específica seja atendida, como quando os dados são carregados. Basta envolver os componentes dinâmicos em Suspense e fornecer um componente temporário para exibir enquanto a parte dinâmica é carregada. Para isso, mova a busca de dados para dentro do componente.
De volta ao projeto
Exclua fetchIncome() e seus dados de app/dashboard/(overview)/page.tsx:
Importar <Suspense> do React e envolver o <IncomeChart/> com ele. É possível passar um componente de fallback chamado <IncomeChartSkeleton>.
Por fim, é necessário atualizar o componente <IncomeChart> para buscar seus próprios dados e remover a prop anteriormente passada:
Agora, ao atualizar a página ao vivo, deve-se notar um skeleton loader no local do gráfico enquanto os dados estão sendo carregados.
Na Prática
Importante: Não é necessário mover o arquivo layout.tsx para a pasta (overview) como mostrado no vídeo.
Obrigado pelo seu feedback!
