Skip to content

✨ feat: add Skeleton component - #729

Open
futjesus wants to merge 1 commit into
mainfrom
feat/skeleton
Open

futjesus wants to merge 1 commit into
mainfrom
feat/skeleton

Conversation

@futjesus

@futjesus futjesus commented Sep 3, 2026

Copy link
Copy Markdown
Collaborator

Summary

Settings (ActivitySkeleton), billing (TransactionsSkeleton) and dashboard-manager (AccountSelector, RegionSelector, BillingStatCard) each hand-build animate-pulse placeholder blocks because the only skeleton in the library is the table body one, which is internal.

  • Skeleton (new): renders count blocks with shape rect (default), text or circle, sized further through className, inside a role="status" wrapper with aria-busy and an accessible label ("Loading" by default).
  • Exported from the package root. The table skeleton is untouched.

Test plan

  • New tests: status role and label, count and shape, circle + custom size, axe
  • npx vitest run lib/components/Skeleton, lint, types, prettier
  • Storybook: Skeleton

Settings (ActivitySkeleton), billing (TransactionsSkeleton) and
dashboard-manager (AccountSelector, RegionSelector, BillingStatCard) each
hand-build `animate-pulse` blocks because the only skeleton in the library
is the table body one, which is not exported. Skeleton renders `count`
blocks in a `rect`, `text` or `circle` shape inside a `role="status"`
wrapper named by `label`.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant