By Bob Poláček, updated
Skeleton screen
A skeleton screen holds the shape of content while it loads, as grey lines, circles and blocks with a slow pulse, so the layout does not jump when the content arrives.
By Bob Poláček, updated
Skeleton screen on iOS and Android
Also called Skeleton loader. The same idea in each system, with the values Appetite UI gives it.
| iOS | Android (Material 3) | Appetite UI | |
|---|---|---|---|
| Name | Redacted placeholder in SwiftUI, no Figma component | No component; progress indicators only | Skeleton |
In the kit
The components, drawn live from the kit’s tokens. Tap them: they behave as the Figma prototype does.
Skeleton rows and a Spinner
In practice
For a list or cards whose layout is known, a skeleton beats a spinner: the screen keeps its shape and the wait feels shorter. A spinner suits a wait whose result has no known shape, and a progress bar a wait whose length is known.
Appetite UI draws Skeleton as a line, a circle and a block with a slow pulse, and a list row built from them. A skeleton has no interaction, so announce the loading state once on its container and keep the grey shapes out of the reading order.
| Appetite UI component | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Skeleton, Line 200 x 12, Circle 40, Block 200 x 120 | SwiftUI redacted(reason: .placeholder), no Figma component | No counterpart, progress indicators only | Appetite UI draws the shapes you place. SwiftUI blanks the real content in place. Neither platform defines a pulse |
Questions
Should I use a skeleton screen or a spinner?
A skeleton when you know the shape of what is loading, such as a list or cards. A spinner when you do not, and a progress bar or ring when you know how long the wait is.
Are skeleton screens accessible?
They can be: announce the loading state once on the container, for example with the label Loading, and hide the grey shapes from screen readers, since they carry no text.
Sources
The pages the facts above rest on.
- Apple Human Interface Guidelines: Progress indicators, read October 13, 2026
- Apple Developer: redacted(reason:), read October 13, 2026
- Material Design 3: Progress indicators, read October 13, 2026