Skeleton nativelite

A shimmering placeholder block while content loads.

Children: none

Preview

Loading the renderer…

width

height

rounded

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Skeleton",
          "width": "60%",
          "height": "16px"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Skeleton rendered by the React renderer on Web — **Web** React

Skeleton rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Skeleton rendered by the Compose renderer on Android — **Android** Compose

Skeleton rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-skeleton, painted by each native renderer.

Variants

rounded

Props

Prop	Type	Default	Description
`width`	`string`	–	A length (px or %); defaults to the full width.
`height`	`string`	–	A length (px); defaults to one text line.
`rounded`	`boolean`	`false`	A circle instead of a bar.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: hidden
Semantics: hidden (the parent announces busy)

Not focusable; no keys.

Theming

Recipe parts: Skeleton/root
Keyed by: rounded:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Skeleton

A pulsing block standing in for text that is still loading, at the SHAPE of what will arrive — a row's worth of bars, never a spinner in a list.

It is a web and desktop affordance only: both natives answer a pending screen with a centred spinner, because a phone list is short enough that a skeleton flashes before it reads.

Webok

Skeletonpackages/ui/src/skeleton.tsx

iOSn/a

no skeleton or shimmer anywhere: a loading screen is a centred spinner

Androidn/a

same — LoadingState (Scaffolding.kt) centres a spinner instead

Desktopok

controls::feedback::skeletonapps/desktop/crates/exponential-ui-gpui/src/controls/feedback.rs

radius MD on the theme skeleton fill, breathing 100% to 50% over the web 2s pulse on the standard curve