Usage

Import the component from its dedicated entry. The component loads its structural styles.

Import the theme in your application entry:

import '@astryx-vue/themes/neutral.css'

Component usage:

<script setup lang="ts">
import { Skeleton } from '@astryx-vue/core/Skeleton'
</script>

<template>
  <div aria-busy="true" aria-label="Loading content" role="status">
    <Skeleton :height="20" :width="200" />
  </div>
</template>

Best practices

Guidance	Practices
Do	Match the size and shape of the content being loaded to create a realistic placeholder.
Do	Stagger multiple skeletons with the index prop for a natural wave animation.
Don't	Use when the content dimensions are unknown; use Spinner instead.
Don't	Combine with a Spinner on the same content area; pick one loading pattern.
Don't	Show skeletons indefinitely; if loading takes too long, show an error or empty state instead.

Examples

Compose placeholder shapes to match the dimensions and structure of the final content.

Content placeholder

Match each placeholder to the final content's size and shape, then use index to stagger the pulse animation.