title: 'Skeleton' slug: /components/skeleton/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/skeleton' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-skeleton--basic' typescript: ./src/SkeletonBodyText/SkeletonBodyText.tsx,./src/SkeletonContainer/SkeletonContainer.tsx,./src/SkeletonDisplayText/SkeletonDisplayText.tsx,./src/SkeletonImage/SkeletonImage.tsx,./src/SkeletonRow/SkeletonRow.tsx

Skeleton is used to display a loading state in components.

Import

import { Skeleton } from '@contentful/f36-components';
// or
import { Skeleton } from '@contentful/f36-skeleton';

How to use Skeleton

• Compound components of Skeleton are: Container, BodyText, DisplayText, Image, Row.
• Use the Skeleton.Container to control color, background color, animation, opacity of the skeleton elements that are used inside.
• Use the Skeleton.BodyText component to simulate bodies of text with multiple lines.
• Use the Skeleton.DisplayText component to simulate headings, subheadings or titles.
• Use the Skeleton.Image component to simulate images, illustrations, avatars or icons.
• Use the Skeleton.Row component to simulate table rows. Only use this component as a child of the TableBody component. The Skeleton.Row component renders <tr> tags, and this HTML tag should always be a child of a <tbody> tag.
  • Pass a value to the columnCount prop equal to the number of columns in your table (default value is 5).
  • Pass a value to the rowCount prop equal to the number of rows you need.
  • We think that for a better experience this value should match the number of rows that this table usually has when it's first loaded.

Examples

Basic usage

Different speed and color

Composition with different skeleton components

Setting image width and height

Pass some value to the width and height props to make the skeleton the same size as the simulated image (default values are 70). You can use the same values a normal <rect> tag would accept for width and height

Round image skeleton

Pass some value to the radiusX and radiusY props to control the roundness of skeleton's corners (default values are 0). You can use the same values a normal <rect> tag would accept for rx and ry

Table rows

Usage without compound components

Props (API reference)

Skeleton.Container

Skeleton.BodyText

Skeleton.DisplayText

Skeleton.Image

Skeleton.Row