Skip to content
Feedback & Status

Skeleton

server22.25 kB
@stellaria/nebula-webSkeletonProps

Preview

Props

9
PropTypeDefault

animation

How the block moves while it waits. `"none"` is not just a preference — it is what a long list of skeletons wants, since a screenful of shimmer reads as noise rather than as progress.

SkeletonAnimation"shimmer"

children

The real content, rendered bare once `loading` is false. It never shows underneath the placeholder: the two are branches, not layers.

ReactNode

circle

Turns the block into a circle, which is what an avatar placeholder needs.

booleanfalse

className

string

height

How tall the block is. In `em` on purpose, so a placeholder standing in for text keeps the height of the line it replaces and the page does not jump when the content lands.

Unit"1em"

label

The accessible name of the `status` region. With more than one line the lines are `aria-hidden` and only the stack carries it, so the wait is announced once and not once per line. It is English by default (ADR-120); translate it at the call site.

string"Loading content"

lines

How many lines the block is drawn as. Above one the last is shortened, as running text does.

number1

loading

Whether the placeholder is showing. It starts ON, which is what lets the component wrap the real content and swap itself out — `loading={isPending}` and no ternary at the call site.

booleantrue

width

How wide the block is. It fills its container by default, so the width usually wants setting on whatever holds it rather than here.

Unit"100%"

Slot props

1

Each one spreads over an inner element, so you can restyle a region without forking the component.

PropTypeDefault

lineProps

Every line of the block. It spreads over ALL of them, and it is the route to the shape of the line itself —`lineProps={{ r: "lg" }}`—: with more than one line the style props land on the stack that holds them, not on the lines. With a single line there is no stack, so the style props already reach it and this slot is redundant.

BoxSlotProps

Also accepts

On top of its own props, this component forwards these groups.

Style props · 128