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
| Class | Applied to | Description |
|---|---|---|
.s-skeleton | N/A | Base monochrome style |
.s-skeleton__ai | .s-skeleton | Colorful skeleton style for AI elements |
Examples
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
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
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.