Skeleton
Display placeholder shapes while content is loading to indicate something is on its way
Examples
Combine skeleton variants to match the layout of the content that is loading. Stack line variants for text, use block for images or card areas, and circle for avatars.
Basic variants
<Content flexDirection="column" gap="small" style={{ width: 400 }}>
<Skeleton variant="line-large" />
<Skeleton variant="line-medium" />
<Skeleton variant="line-small" />
<Skeleton variant="block" />
<Skeleton variant="circle" />
</Content>Text paragraph
<Content flexDirection="column" gap="small" style={{ width: 400 }}>
<Skeleton variant="line-large" />
<Skeleton variant="line-large" />
<Skeleton variant="line-medium" width="75%" />
</Content>Card content
<Card aria-label="Loading card" style={{ width: 320 }}>
<Card.Header>
<Skeleton variant="line-large" width="60%" />
</Card.Header>
<Content flexDirection="column" gap="small">
<Skeleton variant="block" />
<Skeleton variant="line-large" width="80%" />
<Skeleton variant="line-medium" width="55%" />
</Content>
</Card>User profile
<Content gap="small" alignItems="center" style={{ width: 300 }}>
<Skeleton variant="circle" />
<div
style={{
flex: 1,
display: "flex",
flexDirection: "column",
gap: "var(--space--xx-small)",
}}
>
<Skeleton variant="line-large" width="60%" />
<Skeleton variant="line-small" width="40%" />
</div>
</Content>Table rows
| Title | Description | Tags |
|---|---|---|
<BaseTable
caption="Loading table"
withoutKeyColumn
rowKey={(item) => item.id}
items={[{ id: 1 }, { id: 2 }, { id: 3 }]}
columns={[
{
header: "Title",
render: () => <Skeleton variant="line-medium" />,
},
{
header: "Description",
render: () => <Skeleton variant="line-medium" />,
},
{
header: "Tags",
render: () => <Skeleton variant="line-medium" />,
},
]}
/>Form fields
<Content flexDirection="column" gap="medium">
<FormElementWrapper label="Username" name="username">
<Skeleton variant="line-large" height={36} />
</FormElementWrapper>
<FormElementWrapper label="Email" name="email">
<Skeleton variant="line-large" height={36} />
</FormElementWrapper>
</Content>Properties
| Property | Description | Defined | Value |
|---|---|---|---|
variantRequired | "block" | "circle" | "line-large" | "line-medium" | "line-small"Shape of the loading placeholder | ||
widthOptional | | string | numberOverride the default width | ||
heightOptional | | string | numberOverride the default height | ||
data-observe-keyOptional | stringUnique string, used by external script e.g. for event tracking | ||
classNameOptional | stringCustom className that's applied to the outermost element (only intended for special cases) | ||
styleOptional | objectStyle object to apply custom inline styles (only intended for special cases) |