Loading Overlay

Overlay yang nge-block interaksi saat proses async (submit/fetch) — backdrop + indikator (default BrandedLoader morph). LoadingOverlay (primitif) + BlockUI (wrapper ergonomis).

import { LoadingOverlay, BlockUI } from "@naraya/ui/loading-overlay";

Overview

Di-expose lewat subpath @naraya/ui/loading-overlay (bukan barrel) karena indikator default-nya BrandedLoader yang narik engine morph (flubber). Buat block kecil, override indikator pakai prop indicator (mis. <Spinner />).

Examples

BlockUI — block sebuah form/card

Nama

const [blocked, setBlocked] = useState(false);

<BlockUI blocked={blocked} blur>
  <Card>
    <Form ... />
    <Button onClick={save}>Simpan</Button>
  </Card>
</BlockUI>

LoadingOverlay — contained di container relative

Konten section ini ke-block pas overlay aktif.

<div style={{ position: "relative" }}>
  <Content />
  <LoadingOverlay open={loading} />
</div>

Custom indikator (Spinner) + blur

Block kecil mending pakai Spinner biar ringan.

Menyimpan...

<BlockUI
  blocked={loading}
  blur
  indicator={<Spinner size="lg" />}
>
  <Card>...</Card>
</BlockUI>

Fullscreen

<LoadingOverlay open={loading} fullscreen blur label="Memproses..." />

Props

LoadingOverlay

Prop	Type	Default	Description
open*	`boolean`	—	Tampilkan overlay blocking.
fullscreen	`boolean`	`false`	Fixed full-screen vs mengisi parent relative.
blur	`boolean`	`false`	Blur konten di belakang backdrop.
label	`ReactNode`	—	Teks di bawah indikator default.
indicator	`ReactNode`	—	Override indikator (default: BrandedLoader morph).
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"lg"`	Ukuran indikator default.

BlockUI

Prop	Type	Default	Description
blocked*	`boolean`	—	Block + overlay konten yang dibungkus.
children*	`ReactNode`	—	Konten yang di-block.
...rest	`LoadingOverlayProps`	—	blur / label / indicator / size diteruskan ke overlay.

Tokens Used

--bg-app

Backdrop overlay (alpha 0.7)

--z-overlay / --z-modal

Layer contained / fullscreen

--duration-base / --easing-smooth

Fade-in overlay

Loading Overlay

Overview

Examples

Props

Tokens Used

Accessibility

Related