Skeleton

A placeholder that holds the shape of content while it loads, so the layout does not jump when data arrives. It shimmers every 1.4s and stays static under reduced motion.

<Stack direction="row" gap={3} align="center" aria-busy="true">
<Skeleton circle width={40} height={40} />
<Stack gap={2} style={{ flex: 1 }}>
  <Skeleton width="60%" />
  <Skeleton width="90%" height={12} />
</Stack>
</Stack>

Import

import { Skeleton } from "@merid/react";

Examples

Text block

Without sizing props a skeleton is full width and 1em tall — one line of the surrounding text. Shorten the last line so the block reads as a paragraph.

<Stack gap={2} aria-busy="true">
<Skeleton height={24} width="50%" />
<Skeleton />
<Skeleton />
<Skeleton width="75%" />
</Stack>

Shapes

Numbers are pixels, strings are any CSS length. circle rounds fully; set equal width and height.

<Skeleton width={120} height={80} />
<Skeleton circle width={48} height={48} />
<Skeleton width={96} height={36} />

API reference

Renders an aria-hidden span; forwards its ref. style is merged after the sizing props, so it can override them.

Styling

Skeleton has no component variables. The shimmer runs from --mrd-tray to --mrd-tray-2 — the one gradient Merid allows.

Accessibility

• Every skeleton is aria-hidden; it says nothing to assistive tech on its own.
• Put aria-busy="true" on the region that is loading, and remove it when content arrives. For a spoken cue, add a visually hidden “Loading…” status.

Guidelines

Related

• Spinner — for actions rather than content.
• EmptyState — what to show once loading finds nothing.