Spinner

Indeterminate loading indicator for short, transactional, or layout-agnostic waiting states.

Overview

Spinner is the shared indeterminate loading indicator.

Use it when:

the layout is not worth skeletonizing
the user is waiting on a short action
the loading state is small and local
the surface is already established and only one part is busy

For richer content loading where the final structure is known, prefer Skeleton.

Basic Usage

<div className="flex items-center justify-center h-48">
  <Spinner className="w-8 h-8" />
</div>

This matches the pattern used in TaskPanelDetails.tsx.

Small Inline Spinner

<div className="flex items-center gap-2 text-faint">
  <Spinner className="w-4 h-4" />
  <span>Loading more locations...</span>
</div>

Props

Spinner supports standard SVGAttributes<HTMLOrSVGElement>.

Defaults:

animate-spin
h-5
w-5

Override size and color through className.

Spinner Vs SpinnerWithBackground

Some product surfaces use SpinnerWithBackground directly from @fsai/icons.

That is a separate icon treatment, often used for media or file-viewer loading. It is not the same component as the shared-ui Spinner, even though the product purpose is similar.

Brand Dashboard Usage

Pattern	Path	Notes
Full panel blocking wait	`fsai/apps/brand-dashboard/src/modules/tasks/components/TaskPanel/TaskPanelDetails/TaskPanelDetails.tsx`	Simple centered spinner when the layout is not yet worth rendering.
Small local loading message	`fsai/apps/brand-dashboard/src/modules/locations/components/DiscoverLocationsModal/DiscoverLocationsModal.tsx`	Inline loading-more indicator.
Graph or analytics wait state	`fsai/apps/brand-dashboard/src/pages/Learning/components/AnalyticsTab.tsx`	Centered local loading for a single analytics region.
Action-in-progress controls	`fsai/apps/brand-dashboard/src/modules/wizard/ui/ActionButtons.tsx`	Small inline spinner inside workflow controls.
Shared button loading	`fsai/packages/shared-ui/src/primitives/Button/Button.tsx`	Built-in button loading behavior uses spinner semantics.

Guidelines

Do use Spinner for short, indeterminate, or layout-agnostic waits
Do prefer Skeleton when the layout is known
Do size the spinner to the surface instead of relying only on the default
Don't use a centered spinner as the default for every page load when a skeleton would preserve structure better