# Skeleton

Holds the place of content while it loads.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Skeleton.tsx)

## Overview

A skeleton is a loading placeholder that takes the size of the content it wraps.

Match the shape of the content that will load, with `pill` or `circle` for rounded content.

## Examples

### Basic

```tsx
import { Skeleton, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      <div {...styles.column()}>
        <Skeleton style={{ height: 14, width: 160 }} />
        <Skeleton style={{ height: 14, width: 96 }} />
      </div>
      <Skeleton>
        <p {...styles.text()}>Keeps the size of its content</p>
      </Skeleton>
    </div>
  )
}

namespace styles {
  export const column = style({ display: 'flex', flexDirection: 'column', gap: '2' })

  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '4' })

  export const text = style({ margin: '0', typography: 'copy.14' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Skeleton/Basic.tsx)

### Shape

Set `shape` to `default`, `pill`, or `circle`. It defaults to `default`.

```tsx
import { Skeleton, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      <Skeleton shape="circle" style={{ height: 40, width: 40 }} />
      <Skeleton shape="default" style={{ height: 14, width: 160 }} />
      <Skeleton shape="pill" style={{ height: 32, width: 96 }} />
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '4' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Skeleton/Shape.tsx)

### Show

Set `show={false}` once data arrives to reveal the content. It defaults to `true`.

```tsx
import { Skeleton, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      <Skeleton>
        <p {...styles.text()}>Loading content</p>
      </Skeleton>
      <Skeleton show={false}>
        <p {...styles.text()}>Loaded content</p>
      </Skeleton>
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '4' })

  export const text = style({ margin: '0', typography: 'copy.14' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Skeleton/Show.tsx)

## Guidelines

TODO: Write guidelines for Skeleton.