Summary
Create `` to implement the PatternFly v6 Skeleton component.
Loading placeholder that mimics content shape while data loads. Supports text, circle, and rectangle shapes.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
| Red Hat |
`` |
Exists |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` Skeleton
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- React `height`, `width` - CSS dimensions; map to attributes or CSS custom properties
- React `shape`: `circle`, `square` (default is rectangle) - map to `shape` attribute
- React `fontSize`: `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` - for text-height skeletons; map to `font-size` attribute
- React `screenReaderText` - accessible description for loading state; default to "Loading..."
- Pure CSS shimmer animation; MUST respect `prefers-reduced-motion: reduce`
- Element is decorative - `aria-hidden="true"` with `aria-busy` on the container is the parent's responsibility; the element itself provides screen reader text via visually-hidden ``
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Skeleton component.
Loading placeholder that mimics content shape while data loads. Supports text, circle, and rectangle shapes.
Prior Art
Requirements
Element-specific considerations
Checklist
Implementation
Demos
Tests
Reviews
Ship