Mantenha o layout estável enquanto ele responde

Nesta tela de configurações de domínio, o formulário aparece antes de a lista carregar. Por um segundo e meio, não há nada entre os títulos da tabela e o campo. Então as linhas chegam e empurram o formulário para baixo.

Se eu já estou levando o cursor até o campo, preciso acompanhar esse movimento. A página parecia pronta para usar, mas ainda não tinha decidido onde cada coisa ia ficar.

Eu gostaria que esse formulário continuasse no mesmo lugar. Aqui vão alguns exemplos simples de como abrir espaço para o que vem depois.

O skeleton reserva o espaço das linhas antes de os dados chegarem. Ele também mostra que algo está carregando, o que a tabela vazia não deixa claro.

Para isso funcionar, os placeholders precisam seguir as dimensões das linhas carregadas. Eu usaria a mesma altura, o mesmo espaçamento interno e a mesma disposição das colunas nos dois estados. As barras cinzas podem ser menores que o texto que representam; o espaço ao redor precisa se manter.

Um skeleton com metade da altura do conteúdo final ainda faz o formulário se mover quando a resposta chega.

Isso também tem um limite. Três linhas de placeholder não vão reservar o espaço certo para todo resultado possível. Se a quantidade for desconhecida, ainda preciso decidir como essa região vai crescer, ou se o formulário deveria ficar acima da lista. O skeleton ajuda quando seu formato se aproxima do que vem depois.

O mesmo problema pode acontecer dentro de um botão. Troco o texto por um pequeno indicador de carregamento e o botão encolhe logo depois do clique. O conteúdo ao lado pode se mover junto.

Eu manteria as dimensões externas do botão enquanto seu conteúdo muda. O indicador pode ficar no centro do espaço que o texto ocupava.

Isso não precisa significar uma largura fixa definida manualmente para tudo. O botão pode reservar espaço para seu estado mais largo, incluindo traduções e textos maiores. O que importa é que uma atualização de status comum não redimensione o controle de forma inesperada.

Sem espaço reservado

Uma pausa no caminho. Algumas coisas valem o desvio.

Proporção definida

Uma pausa no caminho. Algumas coisas valem o desvio.

Imagens são outro caso em que muitas vezes podemos tomar essa decisão antes. Se sabemos as proporções da imagem, o navegador pode reservar seu espaço antes de o arquivo chegar.

O parágrafo já pode começar na posição final. A imagem preenche o espaço quando estiver pronta.

As dimensões da imagem ou uma proporção adequada tornam isso possível. O espaço reservado precisa corresponder à imagem exibida; um placeholder arbitrário ainda pode causar um salto quando ela carregar.

Tenho achado útil olhar para esses estados juntos. Ao revisar um componente, quero ver o que acontece antes de o conteúdo chegar, enquanto uma ação está em andamento e depois que ela termina.

Para a tabela de domínios, a verificação é simples: repetir o carregamento e observar o formulário. Ele deve continuar onde eu estava prestes a clicar.