Loading

Indicadores de carregamento: um spinner inline/full-page e um overlay bloqueante.

Instalação

npm install @dexcode-core/ui

Uso — Loading

import { Loading } from '@dexcode-core/ui'
 
export default function Example() {
  return <Loading size="md" label="Carregando..." />
}

Ocupando a tela inteira:

<Loading fullPage size="lg" label="Carregando dados..." />

Uso — LoadingOverlay

Overlay bloqueante com fundo escurecido, indicado para ações assíncronas (submit, exclusão, etc.):

import { LoadingOverlay } from '@dexcode-core/ui'
 
export default function Example({ isSaving }: { isSaving: boolean }) {
  return (
    <>
      {isSaving && <LoadingOverlay message="Salvando" />}
      {/* restante da tela */}
    </>
  )
}

Props — Loading

Prop	Tipo	Padrão	Descrição
`fullPage`	`boolean`	`false`	Ocupa a tela inteira com fundo sólido
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do spinner
`label`	`string`	`'Carregando...'`	Texto exibido abaixo do spinner (oculto quando `size="sm"`)

Props — LoadingOverlay

Prop	Tipo	Padrão	Descrição
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do spinner
`message`	`string`	`'Aguarde...'`	Mensagem exibida no card central

Select DataTable