Carregando

Mostra que o conteúdo está a caminho, no formato do que vai aparecer, sem a tela pular quando os dados chegam.

Quando usar

• Na primeira carga de uma tela ou de uma área, enquanto a API responde.
• Numa tabela que busca de novo depois de uma busca, de um filtro ou da troca de página.
• Num botão enquanto a ação que ele disparou não termina (salvar, enviar).

Cargas rápidas não precisam de esqueleto: o BasePageState espera 300 ms (delay) antes de mostrá-lo, para a tela não piscar.

Componentes

• BasePageState com status="loading": o esqueleto padrão da área, ou o slot loading com o formato da tela.
• BaseSkeleton: as formas do esqueleto (texto, bloco, círculo) quando o padrão não serve.
• BaseDataTable com loading: linhas de esqueleto no lugar dos dados, e o leitor de tela ouve "Carregando registros". O cabeçalho, a barra de ferramentas e a paginação continuam na tela.
• BaseButton com loading: o botão mostra que está trabalhando e não aceita um segundo clique.

Texto

• O loading-label diz ao leitor de tela o que está carregando: "Carregando a obra", "Carregando os contratos".
• Não escreva "Aguarde..." na tela: o esqueleto já diz isso.
• Não troque o rótulo do botão para "Salvando...". Com loading, um círculo gira no lugar do texto, mas "Salvar medição" continua sendo o nome do botão para o leitor de tela, e o botão não muda de largura.

Faça e não faça

Faça	Não faça
Um esqueleto no formato do conteúdo: título, linhas e o bloco da tabela.	Um spinner girando no meio da tela vazia.
loading no botão que salvou, até a resposta chegar.	Deixar o botão livre e salvar duas vezes com dois cliques.
Passar loading à BaseDataTable ao buscar ou trocar de página: cabeçalho, busca e paginação ficam no lugar.	Trocar a tela inteira pelo esqueleto do BasePageState a cada página.

Código

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { BaseButton, BaseDataTable, BasePage, BasePageState, type PageStateStatus } from '@lab-inovacao-tjes/design-system'

const status = ref<PageStateStatus>('loading')
const rows = ref<Measurement[]>([])
const saving = ref(false)

async function load(): Promise<void> {
  status.value = 'loading'
  try {
    rows.value = await measurementService.list()
    status.value = 'ready'
  } catch {
    status.value = 'error'
  }
}

onMounted(load)
</script>

<template>
  <BasePage title="Medições do contrato 012/2026">
    <BasePageState :status="status" loading-label="Carregando as medições" @retry="load">
      <BaseDataTable :columns="columns" :rows="rows" row-key="id" label="Medições" />
      <BaseButton :loading="saving" @click="save">Salvar medição</BaseButton>
    </BasePageState>
  </BasePage>
</template>

Na tela de referência

• P19, detalhe da obra: WorkDetailFeature.vue usa o BasePageState com loading-label="Carregando a obra".
• P19, lista de obras: WorkListFeature.vue usa o loading da BaseDataTable a cada busca e troca de página.
• P20: em construção.