Skeleton

Introduction

Skeleton provides elements that can be used as placeholders while your content is loading. The idea is that the interface should "jump" as little as possible, which you often can get with loading spinners.

• <Skeleton repeat={N}> Repeats its children N times
• <Skeleton.Text /> Text line (size follows text height)
• <Skeleton.Rect /> Rectangle (any arbitrary size)
• <Skeleton.CardImage /> Used in place of <Card.Image />

Placeholder for text

Let's say you have some content loading that should render as a heading and a paragraph with a couple of lines of text, you can create equivalent placeholders while waiting for the data to load.

Combinations

Cards

In combination with other components, like <Card> you can create a wireframe of how your page will look before any data has been received.

Table cells

By default, HTML tables stretch columns to acommodate the content of its cells. In order to avoid "jumping" on load you can apply widths to table header cells.

Sandbox