import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import { Skeleton } from "baseui/skeleton";
import * as SkeletonExports from "baseui/skeleton";

import SkeletonBasic from "examples/skeleton/basic.tsx";
import SkeletonAutoSizeRows from "examples/skeleton/auto-size-rows.tsx";
import SkeletonCircle from "examples/skeleton/circle.tsx";
import SkeletonAnimation from "examples/skeleton/animation.tsx";
import SkeletonSubElements from "examples/skeleton/subElements.tsx";

import Yard from "../../components/yard/index";
import skeletonYardConfig from "../../components/yard/config/skeleton";

export default Layout;

# Skeleton

<Yard placeholderHeight={44} {...skeletonYardConfig} />

The `Skeleton` component is optimized for rendering shapes with or without animation while waiting for loading corresponding components.

## Examples

<Example title="Basic usage" path="skeleton/basic.tsx">
  <SkeletonBasic />
</Example>

Set `height` and `width` to generate a single rectangular `Skeleton`.

<Example title="AutoSize Rows" path="skeleton/auto-size-rows.tsx">
  <SkeletonAutoSizeRows />
</Example>

When `autoSizeRows` is supplied, the skeleton's rows will dynamically size to fill the container.

<Example title="Other Shapes" path="skeleton/circle.tsx">
  <SkeletonCircle />
</Example>

You can change the shape and position of `Skeleton` through `overrides.Root`.

<Example title="Animation" path="skeleton/animation.tsx">
  <SkeletonAnimation />
</Example>

<Example title="Sub elements" path="skeleton/subElements.tsx">
  <SkeletonSubElements />
</Example>

Set `rows` to a positive number and `Skeleton` will generate multiple sub elements with the same shape inside the `Root`.
The background color of `Root` will become transparent automatically when the `rows` equals to a positive number.
You can customize the sub elements' shape and position through `overrides.Row`.

<Exports
  component={SkeletonExports}
  title="Skeleton exports"
  path="baseui/skeleton"
/>