OudsSkeleton class

OUDS Skeleton Design Guidelines

Reference design version : 1.0.0

A skeleton is a UI element that indicates when content is loading. The skeleton enhances user experience by temporarily replacing content with gray areas or animations that simulate the visual structure of the forthcoming content.

OudsSkeleton does not expose width/height parameters of its own and relies on the size constraints provided by its parent. To display it at a specific size, wrap it in a SizedBox (or any other size-constraining widget) instead of passing size values directly:

SizedBox(
  width: 250,
  height: 80,
  child: OudsSkeleton(),
)

OudsSkeleton(
  animated: true,
  hasSecurityMargin: false,
)

Accessibility

By default, OudsSkeleton announces its loading state to screen readers. For screens with multiple skeletons, exclude them from semantics and provide a single screen-level loading announcement to avoid repetition.

Column(
  children: [
    ExcludeSemantics(child: OudsSkeleton()),
    ExcludeSemantics(child: OudsSkeleton()),
    ExcludeSemantics(child: OudsSkeleton()),
  ],
)

// Somewhere once for the whole screen:
Semantics(
  liveRegion: true,
  label: OudsLocalizations.of(context)?.core_common_loading_a11y,
  child: ...,
)

Choose the pattern that matches the context: one loading announcement per isolated skeleton, or a single announcement for a screen presenting many skeletons at once.