Loader Carregador
Introdução
Um componente utilitário de layout de carregamento visual que emparelha um elemento Spinner giratório com texto de mensagem de status companheiro. Usado principalmente para gerenciar as expectativas dos usuários durante buscas no servidor, operações de arquivo, transições de estado ou estados de processamento de conteúdo dentro dos blocos de layout.
O componente Loader está totalmente integrado como um bloco loader no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem facilmente texto de status visual e alinhamentos do spinner diretamente nos esquemas de página do CMS.
Uso
Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam carregadores interativos.
1. Carregador de Estado Central Padrão
Um indicador de carregamento clássico com texto de status padrão, adequado para entradas de painel principais, atualizações de conteúdo ou blocos carregados de forma preguiçosa.
{
"type": "loader",
"text": "Loading workspace data...",
"spinnerPlacement": "start"
}
2. Carregador com Spinner Final (Alinhamento ao Final)
Apresenta o spinner visual alinhado após a mensagem de status, proporcionando um fluxo visual alternativo para rodapés de cartão ou ações de botão embutidas.
{
"type": "loader",
"text": "Please wait while we process your request",
"spinnerPlacement": "end"
}
Props
| Propriedade | Tipo de Campo CMS | Padrão | Descrição / Opções Suportadas |
|---|---|---|---|
Texto de Status (text) | string | - | O texto da mensagem exibido ao lado do spinner giratório. |
Posicionamento do Spinner (spinnerPlacement) | select | "start" | Alinhamento do spinner em relação ao texto acompanhante. • Opções: "start", "end". |
Notas do Desenvolvedor e Acessibilidade
- Sem Hidratação (Somente Estático): O Loader é um auxiliar de layout puramente apresentacional designado como componente Somente Estático (
Tier 3). Ele compila para marcação HTML/CSS padrão do lado do servidor com absolutamente zero JavaScript interativo do lado do cliente. - Conformidade WAI-ARIA: Nos bastidores, este componente é projetado para tecnologias assistivas, compilando com parâmetros apropriados de região ao vivo ou contêiner ocupado (ex.
aria-busy="true",role="status"em contêineres pais) garantindo comunicação suave de atividades em segundo plano em andamento.