# 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/glossary/skeleton-screen. Skeleton screen vs spinner in mobile apps. Also called Skeleton loader.

## Why it matters

A skeleton keeps the layout from jumping when content arrives, so the wait feels shorter.

It only works when the shape of the content is known in advance.

## iOS and Android

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

## Common mistakes

- Drawing a skeleton that does not match the content’s shape.
- Pulsing it fast. Keep the pulse slow.
- Using one where the shape is unknown. Use a spinner.

## 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/glossary/empty-state)
- Glossary: [Progress indicator](https://www.appetiteui.com/glossary/progress-indicator)