Data
DataSkeleton
Animated loading placeholder in text, circular, rectangular, or rounded variants.
Data
Data components handle the rendering of structured information in detail views, sidebars, and list pages. They cover everything from a single formatted number to a full activity feed with date grouping.
Components
<XADataSkeleton />
A single animated loading placeholder element. Combine multiples to build skeleton screens.
<!-- Text line skeleton -->
<XADataSkeleton variant="text" width="60%" />
<!-- Avatar skeleton -->
<XADataSkeleton variant="circular" width="40px" height="40px" />
<!-- Card body skeleton -->
<XADataSkeleton variant="rounded" height="120px" />
<!-- Non-animated -->
<XADataSkeleton variant="rectangular" :animate="false" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text' | 'circular' | 'rectangular' | 'rounded' | 'text' | Shape variant. text renders a thin rounded bar; circular renders a full circle; rectangular is a plain rect; rounded has rounded-lg. |
width | string | '' | CSS width (e.g. '80%', '200px'). Falls back to variant defaults. |
height | string | '' | CSS height. Falls back to variant defaults. |
as | string | 'div' | HTML element to render. |
animate | boolean | true | Apply animate-pulse animation. |
AI Context
component: XADataSkeleton
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Data
use-when: Showing animated loading placeholders while async data is loading. Compose multiple instances to build skeleton screens matching the target layout.
variants: [text, circular, rectangular, rounded]