State
StateLoading
Multi-variant loading skeleton and spinner with rows, card, form, table, and spinner modes.
State
The State category provides three building-block components for communicating asynchronous UI states: empty data sets, error conditions, and loading progress. Using these consistently instead of ad-hoc inline markup keeps feedback patterns uniform throughout the application.
Components
<XAStateLoading />
A multi-variant loading component that adapts its skeleton or spinner to the type of content being loaded. All variants include role="status" and aria-live="polite".
<!-- Default spinner with message -->
<XAStateLoading message="Loading users..." size="md" />
<!-- Row skeletons for list content -->
<XAStateLoading variant="rows" :rows="5" />
<!-- Table skeleton -->
<XAStateLoading variant="table" :rows="8" />
<!-- Form skeleton -->
<XAStateLoading variant="form" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | String | 'spinner' | Loading style — 'spinner', 'rows', 'card', 'form', or 'table'. |
rows | Number | 3 | Number of skeleton rows for rows and table variants. |
message | String | '' | Optional message shown below the spinner (spinner variant only). |
size | String | 'md' | Spinner size — affects spinner dimensions and message font size. |
AI Context
component: XAStateLoading
package: "@xenterprises/nuxt-x-app"
category: State
use-when: >
Use XAStateLoading while async data is in flight. Choose the variant that
matches the shape of the content being loaded: rows for lists, table for
tables, form for forms, spinner for generic waits. Preferred over inline
ad-hoc loading markup.