Skeleton

Shows content placeholder before data is loaded

GuidelinesReact

When to use

  • When you need to display placeholder preview of your content before the data is loaded
  • When component has large content
  • To keep users from giving up on an experience.

Component status

Figma

React

iOS

Android

N/A
Released
Released
N/A

Behavior

Default

By default Skeleton component have single row. You can change number of rows, their height and offset between them. It’s useful if you need to make it equal to expected height of the upcoming data.

Rows

You can create Skeleton with certain number of rect rows. Rows are adjustable with rowHeight and rowOffset properties.

Presets

Skeleton component have presets, it’s useful, when you need to build the layout with different components like Button, Text, Image, Card and etc.