Skeleton List

A high-level skeleton wrapper — drop in nine ready-made list/card placeholders that match common mobile patterns.

Basic Usage

Default avatar-two-line placeholder

A typical mobile list row placeholder — avatar + title + subtitle + trailing meta.

import { SkeletonList } from 'fluxo-ui';

<SkeletonList rows={6} variant="avatar-two-line" />

Variants

Simple

Single text line per row.

Avatar + text

Avatar with one line of text.

Avatar two-line (default)

Avatar + title + subtitle + trailing meta.

Thumbnail

Square thumbnail + two-line description.

Two-line with action

Two-line description with a trailing pill-shaped action.

Card stack

Each item rendered as a media card with body text.

Comment

Compact avatar + author + multi-line body.

Chat bubbles

Alternating left/right bubble placeholders.

Media tile

16:9 image placeholder with two text lines.

<SkeletonList variant="thumbnail" rows={4} />
<SkeletonList variant="card-stack" rows={3} />
<SkeletonList variant="chat" rows={6} />
<SkeletonList variant="media" rows={3} />

Import

import { SkeletonList } from 'fluxo-ui';
import type { SkeletonListProps, SkeletonListVariant } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

rows

number

"5"

Number of placeholder rows to render.

rows

number"5"

Number of placeholder rows to render.

variant

'simple' | 'avatar-text' | 'avatar-two-line' | 'thumbnail' | 'two-line-action' | 'card-stack' | 'chat' | 'comment' | 'media'

"'avatar-two-line'"

Layout preset. 'simple' is a single text line per row, 'avatar-two-line' is a typical mobile list row, 'card-stack' renders content cards, 'chat' alternates left/right bubbles, 'media' renders image-on-top cards.

variant

'simple' | 'avatar-text' | 'avatar-two-line' | 'thumbnail' | 'two-line-action' | 'card-stack' | 'chat' | 'comment' | 'media'

"'avatar-two-line'"

showDivider

boolean

"true"

Show a subtle separator between rows (ignored for card/media variants).

showDivider

boolean"true"

Show a subtle separator between rows (ignored for card/media variants).

rowHeight

string | number

—

Override the height of a row (only applies to 'simple' variant).

rowHeight

string | number

Override the height of a row (only applies to 'simple' variant).

avatarSize

string

"'2.5rem'"

Avatar/thumbnail size used by avatar variants.

avatarSize

string"'2.5rem'"

Avatar/thumbnail size used by avatar variants.

avatarShape

'circle' | 'square'

"'circle'"

Shape used for avatar variants.

avatarShape

'circle' | 'square'"'circle'"

Shape used for avatar variants.

gap

string | number

"'0.75rem'"

Gap between rows.

gap

string | number"'0.75rem'"

Gap between rows.

padding

string | number

"'0.75rem 1rem'"

Outer padding of the list container.

padding

string | number"'0.75rem 1rem'"

Outer padding of the list container.

animated

boolean

"true"

Toggle the shimmer animation.

animated

boolean"true"

Toggle the shimmer animation.

animation

'shimmer' | 'pulse'

"'shimmer'"

Animation style.

animation

'shimmer' | 'pulse'"'shimmer'"

Animation style.

level

1 | 2 | 3 | 4 | 5 | 6

"2"

Background contrast level.

level

1 | 2 | 3 | 4 | 5 | 6"2"

Background contrast level.

className

string

—

Additional CSS class for the list root.

className

string

Additional CSS class for the list root.

loadingLabel

string

"'Loading list'"

Visually-hidden screen reader label.

loadingLabel

string"'Loading list'"

Visually-hidden screen reader label.

Features

Nine presets

simple, avatar-text, avatar-two-line, thumbnail, two-line-action, card-stack, comment, chat, media.

Built from primitives

Composed from existing SkeletonAvatar / SkeletonLine / SkeletonRect / SkeletonText — same shimmer animation.

Configurable density

Tune rows, gap, padding, avatar shape, and contrast level to match the real UI.

Shimmer or pulse

Two animations — pick whichever feels right for the surface.

Screen reader aware

role="status" + aria-busy + customizable loadingLabel so assistive tech announces loading state.

Theme-driven

Uses --eui-* tokens — flips correctly under dark mode and every brand theme.