# Skeleton

Replaces content with same shape placeholder that indicates a loading state.

```jsx
<Skeleton>Loading</Skeleton>
```

## [API Reference](#api-reference)

This component is based on the `span` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop        | Type                 | Default          |
| ----------- | -------------------- | ---------------- |
| `loading`   | `boolean`            | `true`           |
| `width`     | `Responsive<string>` | No default value |
| `minWidth`  | `Responsive<string>` | No default value |
| `maxWidth`  | `Responsive<string>` | No default value |
| `height`    | `Responsive<string>` | No default value |
| `minHeight` | `Responsive<string>` | No default value |
| `maxHeight` | `Responsive<string>` | No default value |

## [Examples](#examples)

### [Size](#size)

Use the width and height props to manually control the size of the skeleton.

```jsx
<Skeleton width="48px" height="48px" />
```

### [With children](#with-children)

Use the `loading` prop to control whether the skeleton or its children are displayed. Skeleton preserves the dimensions of children when they are hidden and disables interactive elements.

```jsx
<Flex gap="4">
  <Skeleton loading={true}>
    <Switch defaultChecked />
  </Skeleton>

  <Skeleton loading={false}>
    <Switch defaultChecked />
  </Skeleton>
</Flex>
```

### [With text](#with-text)

When using Skeleton with text, you’d usually wrap the text node itself rather than the parent element. This ensures that the text is replaced with a placeholder of the same size:

```jsx
<Container size="1">
  <Flex direction="column" gap="2">
    <Text>
      <Skeleton>Lorem ipsum dolor sit amet.</Skeleton>
    </Text>

    <Skeleton>
      <Text>Lorem ipsum dolor sit amet</Text>
    </Skeleton>
  </Flex>
</Container>
```

The difference is especially noticeable when wrapping longer paragraphs:

```jsx
<Container size="1">
  <Flex direction="column" gap="3">
    <Text>
      <Skeleton>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus,
        efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed,
        aliquet nec magna.
      </Skeleton>
    </Text>

    <Skeleton>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus,
        efficitur id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed,
        aliquet nec magna.
      </Text>
    </Skeleton>
  </Flex>
</Container>
```