import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";
import { Skeleton } from "./Skeleton";
import { Heading } from "../Heading";
import { Box } from "../Box";

<Meta title="Components/Feedback/Skeleton" component={Skeleton} />

# Skeleton

`Skeleton` is used as a placeholder to indicate that content is being loaded into an area of the app.

```jsx
import { Skeleton } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Skeleton">
    <Skeleton />
  </Story>
</Preview>

## Custom Props

`Skeleton` uses [`BoxProps`](/?path=/docs/components-box--box#all-props) and does not have any custom props.

## Demos

### Height

`Skeleton` will inherit the current font size and adjust its height accordingly.

<Preview>
  <Story name="Skeleton variant">
    <Box>
      <Heading.H1 className="mb-4">
        H1
        <Skeleton />
      </Heading.H1>
      <Heading.H2 className="mb-4">
        H2
        <Skeleton />
      </Heading.H2>
      <Heading.H3 className="mb-4">
        H3
        <Skeleton />
      </Heading.H3>
      <p className="mb-4">
        paragraph
        <Skeleton />
      </p>
    </Box>
  </Story>
</Preview>