Docs›Componentes (Admin)›mad-skeleton
Componentes (Admin)

mad-skeleton

Placeholder shimmer de carregamento.

Bloco animado (shimmer) usado como placeholder de conteudo enquanto uma area carrega de forma assincrona. Visual puro, sem estado server-side.

Props

Prop Tipo Default Descricao
height string '16px' Altura (qualquer unidade CSS)
width string '100%' Largura (qualquer unidade CSS)
rounded string '' sm, md, lg, full
class string '' Classes CSS extras

height e width passam por \Mad\Support\CssUnits::length(), o normalizador unico de dimensao do framework:

  • numero puro vira px — height="16" = height="16px";
  • unidade explicita passa direto (px, %, em, rem, vh, ch, ...) sem duplicar sufixo (height="300px" nao vira 300pxpx);
  • calc(), clamp(), min(), max(), var() e as palavras-chave (auto, fit-content, ...) sao aceitas;
  • qualquer coisa fora da allow-list (inclusive tentativa de fechar o atributo style) cai no default — 16px para height, 100% para width.

Linha de texto

<mad-skeleton />

Bloco custom

<mad-skeleton width="60%" height="20px" rounded="sm" />

Avatar circular

<mad-skeleton width="48px" height="48px" rounded="full" />

Card placeholder

<div style="display:flex;flex-direction:column;gap:12px;padding:16px;">
    <div style="display:flex;gap:12px;align-items:center;">
        <mad-skeleton width="48px" height="48px" rounded="full" />
        <div style="flex:1;display:flex;flex-direction:column;gap:6px;">
            <mad-skeleton width="40%" height="14px" />
            <mad-skeleton width="70%" height="12px" />
        </div>
    </div>
    <mad-skeleton height="120px" rounded="md" />
    <mad-skeleton width="100%" />
    <mad-skeleton width="80%" />
</div>

Lista placeholder

@for($i = 0; $i < 5; $i++)
    <mad-skeleton height="20px" class="mb-2" />
@endfor

Skeleton condicionado a um estado de loading

<div mad-show="carregando">
    <mad-skeleton height="20px" class="mb-2" />
    <mad-skeleton height="20px" width="80%" class="mb-2" />
    <mad-skeleton height="20px" width="60%" />
</div>
<div mad-show="!carregando">
    {{-- conteudo real --}}
</div>

Quando usar skeleton vs outros indicadores

Preciso... Usar
Placeholder de conteudo enquanto carrega lista/card/detalhe <mad-skeleton>
Mostrar % de progresso conhecido (upload, processamento) <mad-progress :value="N">
Indicar loading indeterminado pequeno (inline com texto) <mad-spinner size="sm">
Loading dentro de botao <mad-btn loading> (NAO <mad-skeleton>)

NUNCA fazer

{{-- ERRADO: skeleton com div animado manual --}}
<div class="placeholder-glow"><span class="placeholder col-6"></span></div>

{{-- CERTO --}}
<mad-skeleton width="50%" />

{{-- ERRADO: skeleton pra loading de uma area inteira sem shape previsivel (use spinner) --}}
<mad-skeleton height="400px" />

{{-- CERTO: spinner centralizado quando nao da pra prever o shape do conteudo --}}
<div style="display:flex;align-items:center;justify-content:center;padding:40px;">
    <mad-spinner size="lg" />
</div>

{{-- ERRADO: deixar skeleton e conteudo real visiveis ao mesmo tempo --}}
<mad-skeleton height="20px" />
<span>{{ $titulo }}</span>

{{-- CERTO: alternar via mad-show conforme o estado de loading --}}
<mad-skeleton height="20px" mad-show="carregando" />
<span mad-show="!carregando">{{ $titulo }}</span>