WrapperLoader
The WrapperLoader component provides a simple pattern for handling loading, empty, and content-ready states — ideal for lists, tables, or dashboards.
Basic Usage
Switches automatically between loading, empty, and children based on state.
Cargando...
Loading data...States
WrapperLoader renders different UIs depending on the provided props.
Loading
Cargando...
Fetching data...Empty
No content available
Content
• Loaded item 1• Loaded item 2• Loaded item 3
Props
Supported properties and default behaviors.
loading: boolean– When true, renders theloadingContentblock.total: number– Determines when the empty state should show (if 0).children: React.ReactNode– Main content to render when data is ready.loadingContent?: React.ReactNode– Optional content shown while loading.emptyContent?: React.ReactNode– Optional content shown whentotal === 0.className?: string– Extends base wrapper styles.
Context Example
Using WrapperLoader inside a dashboard widget.
Recent Users
👤 Jane Doe👤 John Smith