Skeleton

Placeholder in the shape of what's coming

Grey plates the size of the content that hasn't arrived, so the layout is already right when it does and nothing jumps. Size each one to the real thing: width/height for a block, lines for a paragraph (the last line stops at 60%), avatar for a face. They breathe — a slow opacity pulse, flat, no shimmer — and hold still under prefers-reduced-motion.

Skeletons are hidden from assistive tech; the region should say it's loading: aria-busy="true" on the container, and a role="status" with a label if you want it announced (the Page states block does both). For "busy" on something already there, BlockUI; for busy with no shape to promise, Spinner.

Basic

<script setup lang="ts">
import { BlessSkeleton } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessSkeleton avatar width="56px" height="56px" />
    <div style="flex: 1; max-width: 320px"><BlessSkeleton :lines="3" height="12px" /></div>
    <BlessSkeleton width="120px" height="40px" />
  </div>
</template>

Usage

import { BlessSkeleton } from "blessing-ui";

API

Props

Name	Type	Default	Description
width	string	"100%"
height	string	"1em"
lines	number	—	render n text lines instead of one block
avatar	boolean	—	an avatar placeholder: square like BlessAvatar, never leaning