# Skeleton Skeleton renders simple loading placeholders with shape, animation, dimensions, and optional custom radius. Build shells that match the final layout closely so loading feels stable rather than jumpy. ## Import ```ts import { SkeletonComponent } from 'ui'; ``` ## Basic text lines ```ts import { Component } from '@angular/core'; import { SkeletonComponent } from 'ui'; @Component({ selector: 'app-skeleton-basic-example', standalone: true, imports: [SkeletonComponent], template: `
`, }) export class SkeletonBasicExampleComponent {} ``` ## Shapes and dimensions ```ts import { Component } from '@angular/core'; import { SkeletonComponent } from 'ui'; @Component({ selector: 'app-skeleton-shapes-example', standalone: true, imports: [SkeletonComponent], template: `
Rounded text block
Circular avatar
Square tile
Custom radius
`, }) export class SkeletonShapesExampleComponent {} ``` ## Animated and static ```ts import { Component } from '@angular/core'; import { SkeletonComponent } from 'ui'; @Component({ selector: 'app-skeleton-animation-example', standalone: true, imports: [SkeletonComponent], template: `
Animated shimmer
Static placeholder
`, }) export class SkeletonAnimationExampleComponent {} ``` ## Card shell ```ts import { Component } from '@angular/core'; import { SkeletonComponent } from 'ui'; @Component({ selector: 'app-skeleton-card-shell-example', standalone: true, imports: [SkeletonComponent], template: `
`, }) export class SkeletonCardShellExampleComponent {} ``` ## List rows and navigation shells ```ts import { Component } from '@angular/core'; import { SkeletonComponent } from 'ui'; @Component({ selector: 'app-skeleton-list-shell-example', standalone: true, imports: [SkeletonComponent], template: `
@for (row of [1, 2, 3, 4]; track row) {
}
`, }) export class SkeletonListShellExampleComponent {} ``` ## Loading swap pattern ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, SkeletonComponent } from 'ui'; @Component({ selector: 'app-skeleton-detail-panel-example', standalone: true, imports: [ButtonComponent, SkeletonComponent], template: `
Customer detail panel
Toggle between the shell and the resolved content.
{{ loading() ? 'Show loaded state' : 'Show loading state' }}
@if (loading()) {
@for (metric of [1, 2, 3]; track metric) {
}
} @else {
AC
Alicia Carter
Enterprise Customer Success Lead
Last activity 12 minutes ago
Open renewals
3
Health score
82 / 100
ARR
$148,000
Customer requested a rollout timeline for the Q3 permissions update.
Next recommended step: schedule a migration review with IT and procurement this week.
}
`, }) export class SkeletonDetailPanelExampleComponent { protected readonly loading = signal(true); } ``` ## Accessibility ### Role and status `SkeletonComponent` renders with `role="status"` and `aria-busy="true"` so assistive technologies can treat the placeholder as loading feedback. ### Accessible name and busy regions Use `ariaLabel` when the default loading label is too generic for the surrounding context. For example, a profile shell can announce `Loading customer profile` instead of a generic loading message. | Pattern | Guidance | | --- | --- | | loading section | keep the containing region marked busy | | longer wait | pair the shell with nearby loading text | | decorative placeholder only | do not treat the skeleton as final content | ### Applicability Skeleton is not interactive, so there is no keyboard section. Do not add extra ARIA roles that imply a control; keep it as loading status only.