Skeleton

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Preview the structure of loading content with a decorative placeholder. Give the parent region aria-busy and a readable loading message. Replace the skeleton with real content when loading finishes. Set lines for a paragraph and width for a short label instead of sizing the span yourself.

Don't treat it as real data or input. For structure you can't predict, show one generic block instead of many fake cards.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

decorative span; parent loading region owns announcements

Keyboard and accessibility

Skeleton is always aria-hidden=true and never takes focus. The parent announces the loading state once. With reduced motion, the pulse stops.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Skeleton } from '@surflane/ui'

<section aria-label='Environment' aria-busy={loading}>
  {loading ? <Skeleton shape='block' /> : <EnvironmentDetails />}
</section>
<p role='status'>{loading ? 'Loading environment…' : 'Environment loaded.'}</p>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens