SkeletonIndicator
O indicador esqueleto é assim denominado por representar apenas o esqueleto de um layout ainda em carregamento. Trata-se de um espaço reservado de animação temporário para quando uma chamada de serviço demora para retornar dados, a fim de não bloquear a renderização do restante da interface do usuário.
Comumente, os containers principais e componentes superiores do layout, independentes de dados, podem ser exibidos desde o carregamento da tela em seus locais corretos, e então os pedaços menores e internos podem ser carregados enquanto seus esqueletos ficam visíveis temporariamente.
Procurando um componente pronto para uso?
Veja o CpsSkeleton do CPS Elements, um componente web fácil de usar, seja nativamente ou com os frameworks de sua preferência, e totalmente aderente ao CPS Design System.
Variações
Este componente pode ser utilizado conforme as variações descritas a seguir.
Linha
A variação em linha é relevante para denotar linhas de texto que potencialmente aparecerão no lugar do esqueleto após o carregamento concluído. Desta forma, esta variação dificilmente é utilizada apenas uma vez, mas sim algumas vezes seguidas, uma abaixo da outra, para passar a sensação de linhas de texto em um parágrafo.
A aparência desta variação em modo claro:
A aparência desta variação em modo escuro:
Caixa
A variação em caixa é a mais versátil, podendo assumir diferentes tamanhos horizontais e verticais para denotar outros componentes que aparecerão no lugar do esqueleto após o carregamento concluído, como caixas de texto, caixas de seleção, botões, imagens, dentre outros.
A aparência desta variação em modo claro:
A aparência desta variação em modo escuro:
Círculo
A variação em círculo possui utilização mais limitada, geral restringindo-se a demonstrar que aquela área de layout em carregamento apresentará um Avatar quando o conteúdo for recebido. Ainda que um uso mais limitado, gera um efeito visual bem interessante quando em conjunto com as outras variações para o restante do layout em carregamento.
A aparência desta variação em modo claro:
A aparência desta variação em modo escuro:
Boas práticas
Para que este componente seja utilizado da melhor maneira possível, observe as práticas a seguir.
Exibição e comportamento
Este indicador esqueleto existe justamente para evitar layout shift e melhorar a percepção que o usuário tem do layout que será apresentado em breve, portanto suas medidas devem ser sempre as mais próximas possíveis do elemento que aparecerá em seu lugar quando o carregamento for concluído.
Isto é regra para medidas verticais, mas nem sempre é possível para medidas horizontais. Quando uma medida exata não for possível na largura, é recomendado sortear um tamanho dentro de um intervalo de valores aproximados em relação ao conteúdo real que aparecerá quando o carregamento for concluído. Isto gera uma experiência mais agradável durante a transição do conteúdo esqueleto para o conteúdo real.
Animação
Embora exibidos aqui em imagens estáticas, todas as variações deste componente devem ser animadas para demonstrar ao usuário que algo está carregando naquele local, ou seja, a interface não está parada "travada".
O sutil gradiente existente no indicador é o que deve ser animando, transitando horizontalmente através do elemento, o que gera um efeito similar a um brilho passando repetidamente pelo componente.
Acessibilidade
Sendo conteúdos meramente ilustrativos e que não cumprem papel de definição de conteúdo, além de idealmente desaparecem em poucos instantes após a abertura de uma tela, não é necessário nenhum tratamento de acessibilidade especial para este componente.