Se você já usou um aplicativo da Web ou móvel, provavelmente já viu uma tela de esqueleto. Esse dispositivo de interface do usuário oferece uma experiência mais suave quando uma atualização depende do recebimento de dados, que podem demorar um pouco para chegar.
Descubra exatamente o que é uma tela de esqueleto, por que você pode querer usá-la em seu aplicativo e como implementá-la no Next.js.
O que é uma tela de esqueleto?
Uma tela de esqueleto é um elemento de interface do usuário que indica que algo está sendo carregado. Normalmente, é um estado em branco ou "vazio" de um componente de interface do usuário, sem nenhum dado. Por exemplo, se você carregar uma lista de itens de um banco de dados, a tela do esqueleto pode ser uma lista simples sem dados, apenas elementos de caixa de espaço reservado.
Muitos sites e aplicativos usam telas de esqueleto. Alguns os usam para um estado de carregamento, enquanto outros os usam como uma forma de melhorar o desempenho percebido.
Por que usar uma tela de esqueleto?
Existem algumas razões pelas quais você pode querer usar uma tela de esqueleto em seu aplicativo Next.js.
Primeiro, pode melhorar o desempenho percebido do seu aplicativo. Se os usuários virem uma tela em branco enquanto os dados estão sendo carregados, eles podem presumir que o aplicativo está lento ou não está funcionando corretamente. No entanto, se virem uma tela de esqueleto, eles saberão que os dados estão sendo carregados e o aplicativo está funcionando conforme o esperado.
Em segundo lugar, as telas de esqueleto podem ajudar a reduzir "interferências" ou oscilações em sua IU. Se os dados estiverem sendo carregados de forma assíncrona, a interface do usuário pode ser atualizada de forma incremental à medida que seu aplicativo recebe dados. Isso pode tornar a experiência do usuário mais suave.
Em terceiro lugar, as telas de esqueleto podem fornecer uma melhor experiência do usuário se os dados estiverem sendo carregados de uma conexão lenta ou não confiável. Se os dados estiverem sendo obtidos de um servidor remoto, há uma chance de que a conexão seja lenta ou interrompida. Nesses casos, pode ser útil mostrar uma tela de esqueleto para que os usuários saibam que os dados estão sendo carregados, mesmo que demore um pouco.
Como implementar uma tela de esqueleto em Next.js
Existem algumas maneiras de implementar telas de esqueleto em Next.js. Você pode usar recursos integrados para recriar manualmente uma tela de esqueleto simples. Ou você pode usar uma biblioteca como esqueleto de carregamento de reação ou Material UI para fazer o trabalho para você.
Método 1: Usando os recursos integrados
Em Next.js, você pode usar diferentes ganchos de reação e condições simples para mostrar telas de esqueleto. Você pode usar o && prop para renderizar telas de esqueleto condicionalmente.
importar {useState, useEffect} de 'reagir';funçãoMeuComponente() {
const [isLoading, setIsLoading] = useState(verdadeiro);useEffect(() => {
setTimeout(() => setIsLoading(falso), 1000);
}, []);retornar (
<div>
{está carregando && (
<div>
Carregando...
</div>
)}
{!está carregando && (
<div>
Meu conteúdo componente.
</div>
)}
</div>
);
}
exportarpadrão MeuComponente;
O código acima usa o useState gancho para rastrear se os dados estão sendo carregados (está carregando). Ele usa o useEffect gancho para simular o carregamento de dados de forma assíncrona. Por fim, utiliza o && operador para renderizar condicionalmente a tela do esqueleto ou o conteúdo do componente.
Este método não é o ideal, pois requer a configuração manual do está carregando estado e simulando o carregamento de dados. No entanto, é uma maneira simples de implementar uma tela de esqueleto em Next.js.
Método 2: Usando uma biblioteca como 'React-Loading-Skeleton'
Outra maneira de implementar telas de esqueleto é usar uma biblioteca como esqueleto de carregamento de reação. react-loading-skeleton é um componente React que você pode usar para criar telas de esqueleto. tem um componente que você pode agrupar em qualquer elemento da interface do usuário.
Para usar o react-loading-skeleton, você precisa instalá-lo usando npm.
npm i react-loading-skeletonDepois de instalado, você pode importá-lo para o aplicativo Next.js e usá-lo assim:
importar Reagir de 'reagir';
importar Esqueleto de 'esqueleto de carregamento de reação';
importar 'react-loading-skeleton/dist/skeleton.css'const Aplicativo = () => {
retornar (
<div>
<esqueleto />
<h3>Segunda tela</h3>
<Altura do esqueleto={40} />
</div>
);
};
exportarpadrão Aplicativo;
O código acima importa o Esqueleto componente da biblioteca react-loading-skeleton. Em seguida, ele o usa para criar duas telas de esqueleto. Ele usa o altura prop para definir a altura da tela do esqueleto. Agora você pode usar renderização condicional para renderizar o componente somente quando os dados estiverem presentes.
Método 3: Usando Material UI
Se estiver usando Material UI em seu aplicativo Next.js, você pode usar o componente do @mui/material biblioteca. O
Para usar o
npm instalar @mui/materialDepois de instalado, você pode importá-lo para o aplicativo Next.js e usá-lo assim:
importar Reagir de 'reagir';
importar Esqueleto de '@mui/material/esqueleto';const Aplicativo = () => {
retornar (
<div>
<Variante de esqueleto ="retificar" largura={210} altura={118} />
<h3>Segunda tela</h3>
<Variante de esqueleto ="texto" />
</div>
);
};
exportarpadrão Aplicativo;
O código acima importa o Esqueleto componente do @material-ui/lab biblioteca. Em seguida, ele cria duas telas de esqueleto. O variante prop define o tipo de tela de esqueleto. O largura e altura adereços definem as dimensões da tela do esqueleto.
Você também pode adicionar diferentes animações às suas telas de esqueleto. Material UI tem algumas animações integradas que você pode usar. Por exemplo, você pode usar o animar prop para adicionar uma animação esmaecida às suas telas de esqueleto:
importar Reagir de 'reagir';
importar Esqueleto de '@mui/material/esqueleto';const Aplicativo = () => {
retornar (
<div>
<Variante de esqueleto ="retificar" largura={210} altura={118} />
<h3>Segunda tela</h3>
<Variante de esqueleto ="texto" animar="aceno" />
</div>
);
};
exportarpadrão Aplicativo;
Ao adicionar o animar prop a um componente, você pode incorporar o movimento visual em sua interface de usuário. O aceno O valor adiciona uma animação ondulante à tela do esqueleto. Agora você pode usar a renderização condicional para mostrar o conteúdo após a tela do esqueleto.
Melhore a experiência do usuário com telas de esqueleto
As telas de esqueleto podem ser uma ótima maneira de melhorar a experiência do usuário de seu aplicativo Next.js. Eles podem aumentar a velocidade percebida, reduzir a instabilidade e oferecer uma experiência melhor quando os dados trafegam em uma conexão lenta ou instável.
Seja qual for o método escolhido para adicionar telas de esqueleto, elas são uma ótima maneira de melhorar a experiência do usuário em seu aplicativo Next.js.
