Docs / Components
SenseSkeletonComponent
Loading placeholder from @artificialsenselabs/ui that preserves layout while async content streams in.
Live demo: run nx serve showcase and open /components/skeleton (port 4202).
Overview
Category: Feedback. Selector: sense-skeleton. Import: import { SenseSkeletonComponent } from '@artificialsenselabs/ui';
<div [attr.aria-busy]="pending()" aria-live="polite">
<sense-skeleton width="12rem" height="1rem" />
</div>Inputs
| Input | Type | Default | Description |
|---|---|---|---|
loading | boolean | true | When true, shows shimmer and hides projected content. |
shape | 'rectangle' | 'circle' | 'rectangle' | Placeholder geometry token. |
width | string | '100%' | Host width while loading (ignored when size is set). |
height | string | '1rem' | Host height while loading (ignored when size is set). |
size | string | null | null | Equal width and height shorthand (avatars, icons). |
borderRadius | string | null | null | Override corner radius; circle shape uses full radius token. |
animation | 'wave' | 'none' | 'wave' | Shimmer animation; wave pauses under reduced motion. |
Accessibility
- While loading, the host is decorative (
aria-hidden="true") — it does not announce. Putaria-busy(and optional live status) on the parent region, or usesense-block-ui/sense-spinnerfor an announced busy state. - Projected content is
aria-hiddenandinertuntilloadingis false. - Wave animation pauses under
prefers-reduced-motion: reduce.