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={skeletonRows}
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) |