Estados de carregamento, erro e vazio:o que a IA esquece

Estados de carregamento, erro e vazio são os três que os apps com IA esquecem: toda tela do seu app tem quatro estados — carregando, erro, vazio e sucesso — e a maioria dos produtos feitos com IA só trata o último. É por isso que eles parecem protótipos. Resolva os três estados esquecidos e seu app passa na hora a parecer algo pelo qual as pessoas pagariam.

Eu sei em dez segundos se alguém colocou o app no ar direto de uma sessão de programação com IA. Abro e vejo "Loading..." como texto puro. Um erro derruba a página inteira. Telas vazias não mostram nada além de espaço em branco. As funcionalidades funcionam. O produto continua parecendo quebrado.

Estados de carregamento, erro e vazio: os quatro estados que toda tela tem

Quando seu app busca dados — e quase toda tela busca dados —, quatro coisas podem acontecer. Os dados estão a caminho. Algo deu errado. Ainda não existem dados. Ou os dados chegaram e está tudo certo. A maioria de quem constrói desenha só o final feliz, porque é o estado que vê enquanto constrói. Aí o app parece quebrado 40% do tempo, porque usuários reais passam tempo real nos outros três estados.

O usuário julga seu produto pelo estado em que ele está agora, não pelo que você desenhou. Carregar leva de 2 a 5 segundos por página. Quem usa pela primeira vez sempre cai numa tela vazia. A rede falha. Se esses momentos ficam feios, seu produto parece amador — não importa quão boas sejam as funcionalidades.

Estados de carregamento: esqueletos ganham de spinners

O "Loading..." em texto puro falha duas vezes. Fica horrível, e o layout pula quando o conteúdo de verdade chega. A solução é um esqueleto (skeleton): formas cinza de preenchimento, pulsando de leve, que imitam o layout do conteúdo que vai chegar. Uma lista de cinco cards carrega atrás de cinco contornos cinza de card. Quando os dados chegam, eles se encaixam exatamente no espaço que o esqueleto estava reservando.

Esqueletos são minha arma secreta. Fazem o app parecer 2x mais rápido mesmo quando não é, porque as pessoas percebem a espera de outro jeito quando conseguem ver a forma do que está vindo. Isso é psicologia de UX, não otimização de performance — e não te custa nada além de um pedido para a sua IA.

A regra simples: use um spinner pequeno para ações rápidas, como um clique de botão que leva menos de um segundo, e um esqueleto para tudo o que carrega uma página ou uma lista. Montar um esqueleto é uma fórmula, não uma tarefa de design: copie o layout do componente real, troque texto por retângulos cinza e imagens por círculos cinza, mantenha o mesmo espaçamento, adicione uma animação de pulso. A IA faz isso de uma vez só se você pedir.

Estados de erro: úteis, não assustadores

O estado de erro padrão num app feito com IA é uma mensagem técnica crua — ou, pior, uma página completamente quebrada. Os dois apavoram o usuário. Um bom estado de erro faz três coisas: diz o que aconteceu em linguagem humana ("Não conseguimos carregar suas inscrições"), diz o que fazer em seguida ("Verifique sua conexão e tente de novo") e oferece um jeito de se recuperar — um botão de tentar de novo, um botão de voltar, um link para o suporte.

Tem mais uma camada que a maioria pula: uma rede de proteção em volta da página inteira, para que, quando um componente quebrar, apareça um card educado de "algo deu errado" em vez de derrubar a tela toda junto. Peça à sua IA um "error boundary" e é exatamente isso que você recebe — um widget que quebra não mata mais a página.

Nunca mostre ao usuário um código de erro como título. Nunca perca o trabalho que ele estava fazendo. E sempre dê a ele um botão para apertar — é a sensação de impotência que faz um erro parecer catástrofe.

O livroA Revolução do EUpreendedorLuis Gonçalves sobre como construir um negócio de EUpreendedor com IA sem largar o emprego.Quero o livro →

Estados vazios: transforme um beco sem saída em próximo passo

O estado vazio é o mais negligenciado dos três, e o mais valioso. Todo novo usuário, sem exceção, começa numa tela vazia. Se essa tela está em branco, ele acha que o produto está quebrado e vai embora. Se ela dá as boas-vindas e aponta a próxima ação, vira onboarding.

Um bom estado vazio tem três partes: um visual claro que representa o que está faltando, um título útil que explica o que vai morar ali ("Nenhuma inscrição ainda") e um próximo passo ("Compartilhe o link de inscrição"). O tom importa — "Comece agora" convida, "Não há nada aqui" desanima.

Estados vazios também devem mudar conforme o contexto. Uma busca sem resultados merece "Nada corresponde à sua busca — tente outras palavras" e um botão para limpar os filtros. Um usuário novo merece boas-vindas e uma indicação da primeira ação. Mesmo mecanismo, mensagem diferente — e cada um transforma um momento de confusão num momento de orientação.

Como fazer a IA construir os quatro estados, sempre

Esta é a parte que torna tudo isso viável para um fundador não técnico: você não precisa construir nada disso à mão. Precisa exigir. Quando pedem uma tela nova à IA, a maioria das pessoas descreve só o estado de sucesso — e é só isso que recebe. Em vez disso, detalhe os estados no pedido:

Crie a tela de lista de inscrições. Carregando: mostre um esqueleto com cinco cards de preenchimento. Erro: mostre uma mensagem amigável com um botão de tentar de novo. Vazio: mostre uma mensagem útil e um botão para criar a primeira inscrição. Sucesso: exiba os dados. Siga o mesmo padrão das telas existentes.

Cinco linhas a mais. A IA gera os quatro estados automaticamente e, quando uma tela já tem o padrão, você pode apontar para ela como referência para todas as telas seguintes. Essa é a habilidade central de construir com IA: você define o padrão, a IA implementa. Os estados que todo mundo esquece só são esquecidos porque ninguém pediu.

Tratar os três estados esquecidos é metade do que faz um app parecer real. A outra metade é consistência — toda tela parecendo pertencer ao mesmo produto. Isso é um sistema, não um talento, e é exatamente o que design tokens e uma biblioteca de componentes te dão.

12 semanasA sua carreira corporativa nunca foi o planoCandidate-se à Aceleradora de EUpreendedores.Candidatar-se →

Perguntas frequentes

O que são estados de carregamento, erro e vazio?

São as três situações em que toda tela pode estar além de "deu tudo certo": os dados ainda estão chegando, algo falhou ou ainda não há dados. O usuário esbarra nos três o tempo todo — a cada carregamento de página, a cada soluço da rede, a cada primeira visita —, então um produto que só desenha o estado de sucesso parece quebrado boa parte do tempo.

Telas em esqueleto realmente fazem um app parecer mais rápido?

Sim — a velocidade percebida melhora mesmo quando a velocidade real não muda. Preenchimentos com a forma do conteúdo fazem a espera parecer cerca de 2x mais curta do que um spinner genérico, porque o usuário vê a forma do que está vindo e o layout não pula quando chega.

O que faz um bom estado vazio?

Três coisas: um visual que mostra o que está faltando, um título que explica o que vai aparecer ali e um botão que leva à próxima ação. Os melhores estados vazios funcionam também como onboarding — todo novo usuário começa num deles, então trate-o como seu tapete de boas-vindas, não como um beco sem saída.

A IA vai adicionar esses estados automaticamente?

Só se você pedir. A IA constrói o que você descreve, e a maioria das pessoas descreve só o caminho feliz. Acrescente quatro linhas a cada pedido de tela — carregando, erro, vazio, sucesso — e aponte para uma tela bem construída como padrão. A partir daí, toda tela nova sai com os quatro estados.