Spin
spinOverlays a loading indicator on existing content while preserving its layout.
Usage
Package contents
When spinning is used, the wrapped content is covered with a translucent mask + a centered indicator, making the content transparent and non-interactive.
Data is being calculated, please wait. Here is the content area covered by the mask.
<Spin spinning tip="Loading...">
<YourContent />
</Spin>Loading completed (directly out of content)
When spinning=false, the mask is not rendered, and children is displayed normally.
Data is being calculated, please wait. Here is the content area covered by the mask.
<Spin spinning={false}>
<YourContent />
</Spin>Pure indicator
When children is not transmitted, Spin acts as an independent loading indicator (without mask) and can have prompt copy.
<Spin spinning tip="Processing" />Three sizes
size is passed to the internal Spinner and controls the indicator size.
<>
<Spin spinning size="sm" />
<Spin spinning size="md" />
<Spin spinning size="lg" />
</>When to use
Use Spin to cover a region while a table or card refreshes, blocking pointer interaction with a translucent overlay, spinner, and optional message. Use Spinner for a bare inline loading icon or Progress when completion is measurable.
Import
import { Spin } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| spinning | boolean | true | Whether loading is active. |
| delay | number | 0 | Milliseconds loading must persist before the overlay appears. |
| size | "sm"|"md"|"lg" | "md" | Size forwarded to the internal Spinner. |
| fullscreen | boolean | false | Uses a fixed viewport overlay and ignores children. |
| className | string | — | Container class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| tip | ReactNode | Loading copy centered below the Spinner. |
| children | ReactNode | Covered content; without it, Spin becomes a standalone indicator. |
Example
<Spin spinning={loading} tip="Loading…"><ReportTable /></Spin>
{busy && <Spin fullscreen tip="Loading…" />}Usage guidelines
fullscreenignores children and covers the viewport; fullscreen and wrapped-content use are mutually exclusive.- Use
delayto prevent a flash for fast requests. Use zero for work that should report loading immediately. - Without children, Spin is effectively a Spinner with a tip.
- No other known caveats.
Related
Playground
Data is being calculated, please wait. Here is the content area covered by the mask.
<Spin spinning={true} size="md" tip="Loading..." delay={0}>
{children}
</Spin>