# 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.

Page: https://www.appetiteui.com/academy/glossary/skeleton-screen. Skeleton screen vs spinner in mobile apps. Also called Skeleton loader.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Redacted placeholder in SwiftUI, no Figma component | No component; progress indicators only | Skeleton |

## 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.


Skeleton and its platform counterparts, Appetite UI component, iOS, Material 3, what differs:

| 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

1. [Apple Human Interface Guidelines: Progress indicators](https://developer.apple.com/design/human-interface-guidelines/progress-indicators)
2. [Apple Developer: redacted(reason:)](https://developer.apple.com/documentation/swiftui/view/redacted(reason:))
3. [Material Design 3: Progress indicators](https://m3.material.io/components/progress-indicators/overview)

## Related

- Screens: [Empty state screens](https://www.appetiteui.com/screens/patterns/empty-state)
- Docs: [Skeleton](https://www.appetiteui.com/docs/skeleton)
- Docs: [Progress](https://www.appetiteui.com/docs/progress)
- Glossary: [Empty state](https://www.appetiteui.com/academy/glossary/empty-state)