container · Normal DOM only

Spinner

Tiny indeterminate loading ring. Use inline next to a label, never as a primary "loading" surface.

Use Spinner when an action is in flight: button-loading inline, status badge, polling indicator. For initial page-load use Skeleton or a Progress bar.

Inside a Twenty front-component, prefer the bridge import

This Spinner is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Loader } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Twenty's name for what we call Spinner.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Spinner } from '@8maverik8/twenty-design';

Examples

Sizes & in-place

Loading…

tsx
<Spinner size={14} />
<Spinner size={20} />
<Status color="blue" variant="soft"><Spinner size={10} thickness={1.5} /> Loading…</Status>

Guidelines

✓

Pair Spinner with a label.A bare ring is mysterious — "Loading…" makes the wait readable.

Use Spinner for >5 s waits.Slow waits need a Progress bar or a Status indicator. Spinner suggests it's almost done.