Density

Skeleton

Skeleton provides a decorative, self-closing loading placeholder for content that has not loaded yet.

import { Skeleton } from "density-base-ui";

export default function SkeletonExample() {
  return <Skeleton style={{ width: "12rem" }} />;
}

Pulse

Skeletons pulse by default. Set pulse={false} when the loading state should remain static.

import { Skeleton, View } from "density-base-ui";

export default function SkeletonPulseExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <Skeleton style={{ width: "10rem" }} />
      <Skeleton pulse={false} style={{ width: "10rem" }} />
    </View>
  );
}

Depth

Skeleton inherits the background of its containing Panel. This example shows the translucent skeleton treatment at every supported Panel depth.

import { Panel, Skeleton } from "density-base-ui";

export default function SkeletonDepthExample() {
  return (
    <Panel depth="2">
      <Panel depth="1">
        <Skeleton />
      </Panel>
      <Panel depth="2">
        <Skeleton />
      </Panel>
      <Panel depth="3">
        <Skeleton />
      </Panel>
      <Panel depth="4">
        <Skeleton />
      </Panel>
      <Panel depth="5">
        <Skeleton />
      </Panel>
      <Panel depth="6">
        <Skeleton />
      </Panel>
      <Panel depth="7">
        <Skeleton />
      </Panel>
    </Panel>
  );
}

Size

import { Skeleton, View } from "density-base-ui";

export default function SkeletonSizeExample() {
  return (
    <View>
      <Skeleton size="2xs" style={{ width: "6rem" }} />
      <Skeleton size="xs" style={{ width: "6rem" }} />
      <Skeleton size="sm" style={{ width: "6rem" }} />
      <Skeleton size="md" style={{ width: "6rem" }} />
      <Skeleton size="lg" style={{ width: "6rem" }} />
      <Skeleton size="xl" style={{ width: "6rem" }} />
      <Skeleton size="2xl" style={{ width: "6rem" }} />
      <Skeleton size="3xl" style={{ width: "6rem" }} />
    </View>
  );
}