Skeleton component displays a placeholder preview while data is loading.

To implement the Skeleton component into your project, you’ll need to add the import:

import Skeleton from "@kiwicom/orbit-components/lib/Skeleton";

After adding the import into your project, you can use it simply like:

<Skeleton height={100} width={300} />

or

<Skeleton>
  <rect x="48" y="8" rx="3" ry="3" width="88" height="6" />
  <rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
  <rect x="0" y="56" rx="3" ry="3" width="410" height="6" />
</Skeleton>

or if you need to render only rect elements, you can use the rows property like:

<Skeleton rows={3} rowOffset={15} rowHeight={10} />

or you can pick one from our predefined presets:

<Skeleton preset="Button" />