Em aplicações web modernas, a percepção do usuário sobre a velocidade de carregamento de páginas diretamente impacta a satisfação com a experiência. Quando os usuários enfrentam telas em branco esperando o conteúdo carregar, mesmo que o tempo real de carregamento seja curto, eles têm a sensação subjetiva de " lentidão ". O FastUI, através de seu design baseado em componentes, oferece várias soluções de otimização de estados de carregamento, ajudando desenvolvedores a melhorar efetivamente o desempenho percebido da aplicação. Este artigo abordará do ponto de vista prático detalhes sobre como utilizar os componentes de estado de carregamento embutidos no FastUI para construir telas de esqueleto eficientes, reduzindo a ansiedade do usuário durante o espera.

Componentes Básicos de Estado de Carregamento

O FastUI fornece componentes básicos de indicadores de carregamento que os desenvolvedores podem usar diretamente ou expandir para criar telas de esqueleto personalizadas. O componente de carregamento principal está localizado em src/npm-fastui/src/components/spinner.tsx, implementando um efeito de animação de carregamento básico:

<div className="fastui-spinner-animation">carregando...</div>

Esse componente controla a animação de rotação através da classe CSS fastui-spinner-animation e pode ser usado diretamente para elementos de UI pequenos como botões, itens de lista, etc. Quando é necessário um estado de carregamento mais complexo, os componentes de formulário do FastUI oferecem um mecanismo flexível de substituição de conteúdo durante o carregamento.

Implementação de Estados de Carregamento em Formulários

Em interações de formulário, o estado de carregamento durante o processo de envio é particularmente importante. O componente Form do FastUI suporta conteúdo personalizado para estados de carregamento através da propriedade loadingComponents, implementado em src/npm-fastui/src/components/form.tsx:

{bloqueado && loadingComponents < AnyCompList propsList={loadingComponents} />}

Quando o formulário está em estado bloqueado (bloqueado=true), ele renderiza a lista de componentes definida em loadingComponents, substituindo o conteúdo original do formulário. Esse mecanismo permite que os desenvolvedores projetem telas de esqueleto que correspondam à estrutura do formulário. Exemplo de uso:

<Form 
  submitUrl="/api/enviar"
  loadingComponents={[
    { type: "div", props: { className: "form-skeleton" }, children: [
      { type: "div", props: { className: "skeleton-field" } },
      { type: "div", props: { className: "skeleton-field" } },
      { type: "div", props: { className: "skeleton-button" } }
    ]}
  ]}
>
  {/* Conteúdo do formulário */}
</Form>

Criação de Componentes de Tela de Esqueleto Personalizados

Baseado no sistema de componentes do FastUI, os desenvolvedores podem construir componentes de tela de esqueleto altamente personalizados. A abordagem recomendada é criar um componente Skeleton dedicado, contendo tipos comuns de elementos de tela de esqueleto:

// Exemplo: Criando componente de tela de esqueleto (na prática real do projeto)
export const Skeleton: FC<SkeletonProps> = ({ tipo, linhas, className }) => {
  switch(tipo) {
    case 'texto':
      return <div className={`skeleton-text ${className}`}></div>;
    case 'cartao':
      return (
        <div className={`skeleton-card ${className}`}>
          <div className="skeleton-image"></div>
          {Array(linhas).fill(0).map((_, i) => (
            <div key={i} className="skeleton-text"></div>
          ))}
        </div>
      );
    default:
      return <div className={`skeleton-default ${className}`}></div>;
  }
};

Melhores Práticas e Otimização de Desempenho

1. Correspondência com a estrutura de conteúdo real
   As telas de esqueleto devem simular o layout e dimensões do conteúdo real, reduzindo o deslocamento de layout após o carregamento completo.
2. Carregamento progressivo
   Dê prioridade ao carregamento de telas de esqueleto para conteúdo crítico, áreas não essenciais podem ter carregamento adiado.
3. Redução da complexidade da animação
   Muitas animações de tela de esqueleto podem afetar o desempenho, recomendamos limitar o número de elementos de tela de esqueleto animados simultaneamente.
4. Utilização de transições CSS
   Adicione efeitos de transição suaves para tornar a transição da tela de esqueleto para o conteúdo real mais natural:

.skeleton {
  transition: opacity 0.3s ease-out;
}
.content-loaded .skeleton {
  opacity: 0;
}

Conclusão

O FastUI, através do componente Spinner básico e do mecanismo loadingComponents do Form, oferece suporte flexível para implementação de telas de esqueleto. Os desenvolvedores podem, de acordo com o cenário específico, escolher entre indicadores de carregamento simples ou construir telas de esqueleto em nível de página complexas, melhorando efetivamente o desempenho percebido da aplicação. O chave é projetar uma estrutura de esqueleto que corresponda ao conteúdo e utilizar adequadamente efeitos de animação, balanceando a experiência visual com o overhead de desempenho.

Em projetos reais, recomendamos combinar o sistema de componentes do FastUI para criar uma biblioteca de componentes de tela de esqueleto exclusiva do projeto, unificando o estilo de exibição de estados de carregamento e melhorando a eficiência de desenvolvimento.