Loading Components
Two loading components: LoadingOverlay for full-screen blocking states, and LoadingSkeleton for inline placeholder content.
Live Preview
LoadingSkeleton — default height (5rem)
LoadingSkeleton — custom height (2rem)
LoadingOverlay — full-screen overlay (click button to preview)
Usage
import { LoadingOverlay, LoadingSkeleton } from '@featherstudio/react-daisyui-kit';
// Skeleton placeholder — renders inline
<LoadingSkeleton />
<LoadingSkeleton height="2rem" />
// Full-screen overlay with spinner — renders fixed over the whole page
<LoadingOverlay size="lg" />Features
Full-screen Overlay
LoadingOverlay renders a fixed backdrop covering the entire viewport with a centered spinner.
Spinner Size
Control spinner size via the size prop using DaisyUI breakpoint values: xs / sm / md / lg / xl.
Skeleton Placeholder
LoadingSkeleton renders a full-width animated skeleton block for inline content placeholders.
Configurable Height
Set height on LoadingSkeleton as any CSS value (e.g. '3rem', 80) to match your layout.
Props
LoadingOverlay
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lg' | DaisyUI spinner size |
LoadingSkeleton
| Prop | Type | Default | Description |
|---|---|---|---|
| height | number | string | '5rem' | CSS height of the skeleton block |