Skeleton

<View width="300px" maxWidth="100%">
  <Skeleton  />
</View>

Skeleton should be used to render content placeholders before the real data is available. When there are no size props passed to Skeleton, it mimics the line-height of the default text size:

<Skeleton />

If you need a specific size for the placeholder, you can control it with the width and height properties. For example, you can mimic a button size to provide a hint for the user about the layout of the component. You can pass width and height as both x1 unit multipliers with number values and literal string values, like 50%.

Both of them support responsive syntax, which means you can change them based on the viewport size.

<Skeleton height={9} width="120px" />

By default, Skeleton comes with a small radius. You can change it to any radius token, completely remove it for full-width elements or make it circular to mimic the shape of components like Avatar.

<Skeleton height={15} width={15} borderRadius="circular" />

You can combine multiple Skeletons to build component layouts. However, we recommend not to implement 1:1 representation of the component loading. Instead, it should be enough to only give users a hint of what to expect.

<Card>
  <View gap={3} direction="row">
    <Skeleton width={20} height={20} borderRadius="medium" />
    <View.Item grow>
      <View gap={3}>
        <Text variant="title-1">
          <Skeleton width="30%" />
        </Text>
        <View gap={2}>
          <Skeleton />
          <Skeleton width="60%" />
        </View>

        <View.Item gapBefore={6}>
          <Skeleton height={9} width={25} />
        </View.Item>
      </View>
    </View.Item>
  </View>
</Card>