Loader & Skeleton
Loader marks indeterminate work — signing, broadcasting, scanning. Skeleton holds the shape of content that is on its way — balances, rows, charts. Every variant collapses to a calm opacity pulse under reduced motion; nothing here requires animation to be understood.
Loader — all variants
Seventeen variants, one prop. spinner is the default; the ascii set suits mono console surfaces; the exotic ones are reserved for full-screen ceremony moments, never inline.
import { Loader } from "@coldharbor/ui";
<Loader variant="spinner" label="Broadcasting transaction" />
<Loader variant="ascii" label="Scanning blocks" />--ch-fg--ch-surface-raised
Size & speed
Everything scales from the base square size; speed is seconds per cycle. Announce real work in the label — it is read to screen readers.
<Loader variant="spinner" size={16} speed={1} label="Signing" />--ch-fg--ch-surface-raised
Skeleton — shapes
Three shape presets sized with utilities. The shimmer sweeps left to right; reduced motion swaps it for an opacity pulse automatically.
import { Skeleton } from "@coldharbor/ui";
<Skeleton variant="text" className="w-2/5" />
<Skeleton variant="circle" className="size-8" />
<Skeleton variant="block" className="h-20" />--ch-surface-raised--ch-fg
Composed loading screens
Skeletons mirror the layout they replace — same heights, same gaps — so the reveal is a fade, not a reflow. Left: activity rows. Right: portfolio header.
{isLoading ? <SkeletonTxRow /> : <TransactionRow tx={tx} />}--ch-surface-raised
Themes
Spinner and a loading row under all three layers.
--ch-fg--ch-surface-raised