Skeleton

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

Import#

import { Skeleton } from "@chakra-ui/core";

import { Skeleton } from "@chakra-ui/core";

Usage#

You can use it as a standalone component

<div>
  <Skeleton height="20px" my="10px" />
  <Skeleton height="20px" my="10px" />
  <Skeleton height="20px" my="10px" />
</div>

<div>
  <Skeleton height="20px" my="10px" />
  <Skeleton height="20px" my="10px" />
  <Skeleton height="20px" my="10px" />
</div>

Editable Example

Or to wrap another component to take the same height and width

contents wrapped

won't be visible

<Skeleton>
  <div>contents wrapped</div>
  <div>won't be visible</div>
</Skeleton>

<Skeleton>
  <div>contents wrapped</div>
  <div>won't be visible</div>
</Skeleton>

Editable Example

Useful when fetching remote data

import { Box } from "@chakra-ui/core";

function Card() {
  const { data, loading, error } = useRemoteData();
  if (error) return <Box children="error" />;
  return (
    <Box>
      <Skeleton isLoaded={!loading}>
        <Heading>{data.title}</Heading>
      </Skeleton>
    </Box>
  );
}

import { Box } from "@chakra-ui/core";
function Card() {
  const { data, loading, error } = useRemoteData();
  if (error) return <Box children="error" />;
  return (
    <Box>
      <Skeleton isLoaded={!loading}>
        <Heading>{data.title}</Heading>
      </Skeleton>
    </Box>
  );
}

Skeleton color#

You can change the animation color with colorStart and colorEnd.

<Skeleton colorStart="pink" colorEnd="orange" height="20px" />

<Skeleton colorStart="pink" colorEnd="orange" height="20px" />

Editable Example

Skipping the skeleton when content is loaded#

You can prevent the skeleton from rendering using the isLoaded prop

Chakra ui is cool

<Skeleton isLoaded>
  <span>Chakra ui is cool</span>
</Skeleton>

<Skeleton isLoaded>
  <span>Chakra ui is cool</span>
</Skeleton>

Editable Example

Proudly made in 🇳🇬

Released under the MIT License.

Skeleton

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Skeleton color#

Skipping the skeleton when content is loaded#

Import#