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';
<sense-skeleton width="12rem" height="1rem" [loading]="pending()" />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. |
styleClass | string | null | null | Extra CSS classes on the host. |
ariaLabel | string | null | null | Accessible name override; falls back to i18n skeleton.label. |
Accessibility
- While loading, host exposes
role="status",aria-busy="true", andaria-live="polite". - Projected content is
aria-hiddenandinertuntilloadingis false. - Override
ariaLabelwhen the default i18n label is too generic. - Wave animation pauses under
prefers-reduced-motion: reduce.