Carregamento

Esse padrão deve ser usado sempre que informações ou ações do sistema tiverem um tempo de carregamento ou execução indeterminado. Assim, fica mais fácil a pessoa usuária entender o que está acontecendo e evita que ela desista antes de concluir a ação. Exemplos de carregamento:

Spinner

Não informa a evolução no processo ou tempo de carregamento, por isso deve ser usado quando o tempo de carregamento é indeterminado.

Para mais detalhes acesse a documentação do Spinner.

Pode ser usado dentro de componentes ou estruturas menores, como inputs, campos de busca, dentro de listas e tabelas, e ainda junto a outros componentes, como o botão, por exemplo.

Skeleton

Skeletons são versões simplificadas de componentes e estruturas de uma página, que aparecem antes das informações serem carregadas. Substitui páginas vazias e melhoram a percepção do tempo durante o carregamento.

Não é necessário se apegar em todos os detalhes, já que o Skeleton tem movimento.

Deve formar algo próximo da estrutura final, usando poucos elementos para deixar a página limpa e agradável. Use quando vários elementos precisam ser carregados simultaneamente.

Para mais detalhes acesse a documentação do Skeleton.

Carregamento infinito

Pode ser usado para substituir a paginação e permitir a navegação exploratória.

Esse tipo de navegação não é recomendada para casos onde a pessoa usuária precisa encontrar uma informação específica. Nesses casos, use a paginação.

A cada clique a quantidade de resultados exibidos na listagem aumenta. Por exemplo, se eram exibidos 20 resultados, o botão de "Carregar mais" vai exibir mais 20 outros resultados.

Carregamento em botões

Botões também podem ter um estado de carregamento específico para ações que tomam algum tempo para serem processadas.

Feedback

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.