Skeleton

Skeleton is used to display the loading state of some component.

Component usage

You can use it as a standalone component.

import { Skeleton } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Skeleton h="100px" w="100px" />;
}

⛶

Or to wrap another component to take the same height and width, and then conditionally show it with the isLoaded prop.

import { Button, Skeleton, Stack, ThemeSpace } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <Stack gap={ThemeSpace.Medium}>
      <Skeleton isLoaded={isLoaded}>
        <div>contents wrapped</div>
        <div>will not be visible</div>
      </Skeleton>
      <Button onClick={() => setIsLoaded(!isLoaded)}>Toggle Skeleton</Button>
    </Stack>
  );
}

⛶

Skeleton Color

You can change the animation color with backgroundColor.

import { Skeleton, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Skeleton backgroundColor={ThemeColor.Accent} h="100px" w="100px" />;
}

⛶

Skeleton text

import { SkeletonText, ThemeFontSize, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <SkeletonText noOfLines={4} gap={ThemeSpace.Small} height={ThemeFontSize.Small} width="200px" />;
}

⛶