Sections

Skeleton

A skeleton component is used to indicate that a large block of content, such as an AI responses or post summary, is loading.

Classes

Section titled Classes

Class	Applied to	Description
`.s-skeleton`	N/A	Base monochrome style
`.s-skeleton__ai`	`.s-skeleton`	Colorful skeleton style for AI elements

Examples

Section titled Examples

Base style

Section titled Base style

The default skeleton should be used when loading large blocks will render multiple rows of content.

<div class="s-skeleton">
    <div class="v-visible-sr">Loading…</div>
</div>

Loading…

AI

Section titled AI

The ai variant of the skeleton should be used when loading AI responses.

<div class="s-skeleton s-skeleton__ai">
    <div class="v-visible-sr">Loading…</div>
</div>

Loading…

Accessibility

Section titled Accessibility

For accessibility, it’s important to add fallback loading text that is visible to screen readers. Additionally, you should add aria-busy="true" to the component that triggered the loading state while the skeleton is shown.