container · Normal DOM only

Skeleton

Shimmering placeholder block — used while data is loading. Matches the eventual content shape.

Use Skeleton in lists / cards / metrics during the first paint to convey "data is coming". A good Skeleton has the same line count and rough proportions as the real content — replace with a flicker, not a layout shift.

Install

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

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

Examples

Avatar + two lines + tile

tsx
<Skeleton circle width={32} height={32} />
<Skeleton width="60%" height={14} />
<Skeleton width="100%" height={120} radius="md" />

Guidelines

✓

Match the eventual content silhouette.Skeletons of the wrong shape cause layout jump when data arrives.

Use Skeleton for >2 s loading.After a couple of seconds the Skeleton itself feels broken — show a real loading indicator.