LoadingState
A state view shown while a whole region loads.
Usage
Basic
Loading demo...
Dashboard Recovery States
Occupies the same container as the empty and error states, so nothing jumps when the request settles.
Loading demo...
Best Practices
- Use it for first loads of a screen or whole panel; use
TxSpinnerorTxProgressBarwithloadingfor inline waits. - Name the resource being loaded, such as "Loading rules", not just "Loading".
- If the layout would collapse while loading, use
surface="card"to reserve the height. - Offer cancel or retry only when the request can actually be interrupted or restarted.
API Reference
Takes every TxEmptyState prop, event, and slot except variant, which is fixed to loading.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | Loading | Overrides the preset title. |
description | string | Please wait a moment. | Overrides the preset description. |
icon | TxIconSource | string | null | - | Replaces the loading illustration; null hides the icon area, but the spinner still shows while loading is true. |
iconSize | number | - | Icon or spinner size in px. |
layout | 'vertical' | 'horizontal' | 'vertical' | Direction of the icon and content. |
align | 'start' | 'center' | 'end' | 'center' | Aligns the icon, copy, and actions. |
size | 'small' | 'medium' | 'large' | 'medium' | Spacing, text scale, and illustration size. |
surface | 'plain' | 'card' | 'plain' | card adds a bordered container that reserves space. |
primaryAction | EmptyStateAction | - | Generated primary action; emits primary. |
secondaryAction | EmptyStateAction | - | Generated secondary action, before the primary one; emits secondary. |
actionSize | TxButtonProps['size'] | 'sm' | Default size of the generated buttons. |
loading | boolean | false | Swaps the preset illustration for a spinner when no custom icon is given. |
Events
| Event | Description |
|---|---|
primary | Fires when the generated primary button is clicked. |
secondary | Fires when the generated secondary button is clicked. |
Slots
| Name | Description |
|---|---|
icon | Replaces the loading illustration or spinner. |
title | Replaces the title. |
description | Replaces the description. |
actions | Replaces the generated primary and secondary buttons. |
Technologies
- Source:
packages/tuffex/packages/components/src/loading-state/.
查看源码
packages/tuffex/packages/components/src/loading-state/index.ts