1. Components
  2. Feedback
  3. Skeleton

Skeleton

Use to show a placeholder while content is loading.

<Skeleton className="h-44 w-64" />
<div>
  <Skeleton className="size-10 rounded-full" />
  <div>
    <Skeleton className="h-4 w-44" />
    <Skeleton className="h-4 w-36" />
  </div>
</div>

Installation

npx dotui-cli@latest add skeleton

Usage

Use the Skeleton component to show a placeholder while content is loading.

Options

Children

If you do not pass a fixed size, skeleton will take the size of the children.

<Skeleton>
  <Button>Button</Button>
</Skeleton>

Show

Use the show prop to show/hide the skeleton.

<Skeleton>
  <Button>Button</Button>
</Skeleton>
<Skeleton show={false}>
  <Button>Button</Button>
</Skeleton>

Examples

Loading data from an API

Some text loaded from API.

const [status, setStatus] = React.useState<"idle" | "loading" | "error" | "success">("idle");
const apiCall = () => {
  {/* Simulate API call */}
};

return (
  <div>
    <Button isLoading={status === "loading"} onPress={apiCall}>
      Simulate API Call
    </Button>
    <Skeleton show={status === "loading"}>
      <p>Some text loaded from API.</p>
    </Skeleton>
  </div>
);

Wrapping children with fixed size

If you do not pass a fixed size, it will be calculated automatically.

<Skeleton className="size-20"><Button>Button</Button> </Skeleton>

API Reference

Skeleton accepts all HTML div element props and the following:

PropTypeDefaultDescription
show
boolean
true
Weather the visual style should be filled.

Last updated on 10/11/2024

ProgressAspect Ratio