Skeleton

A decorative loading placeholder rendered as a single static block, sized to stand in for the content it precedes and showing a still, inert silhouette while data loads.

View code

<Card aria-busy="true" aria-label="Loading comments">
	<Card.Content>
		<div mix={[hstack({ gap: 3, align: "center" })]}>
			<Skeleton mix={[pulse(), css({ inlineSize: "2.5rem", blockSize: "2.5rem", borderRadius: "9999px", flexShrink: "0" })]} />
			<div mix={[vstack({ gap: 2, align: "stretch" }), css({ flexGrow: "1" })]}>
				<Skeleton mix={[pulse(), css({ inlineSize: "9rem" })]} />
				<Skeleton mix={[pulse(), css({ inlineSize: "5rem", blockSize: "0.75rem" })]} />
			</div>
		</div>

		<div mix={[vstack({ gap: 2, align: "stretch" })]}>
			<Skeleton mix={[pulse()]} />
			<Skeleton mix={[pulse()]} />
			<Skeleton mix={[pulse(), css({ inlineSize: "60%" })]} />
		</div>

		<div mix={[hstack({ gap: 2, align: "center" })]}>
			<Skeleton mix={[pulse(), css({ inlineSize: "4.5rem", blockSize: "2rem", borderRadius: "9999px" })]} />
			<Skeleton mix={[pulse(), css({ inlineSize: "4.5rem", blockSize: "2rem", borderRadius: "9999px" })]} />
		</div>
	</Card.Content>
</Card>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Skeleton } from "@sdxc/ui";

A static loading placeholder: a rounded block filled with the neutral border color, sized to its container and one text line tall by default. Compose pulse() or shimmer() through mix for a motion cue.

Examples

<Skeleton style={{ blockSize: "2.5rem", inlineSize: "2.5rem", borderRadius: "9999px" }} />

<Skeleton aria-hidden={false} aria-label={t("status.loadingProfile")} />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"div">.