Skeleton

Usage

Use Skeleton to create a placeholder for loading content. Component support following props:

• height – height in px (number) or string for other CSS values
• width – width in px (number) or string for other CSS values
• radius – value from theme.radius or number to set border-radius in px
• circle – if true width, height and border-radius will equal to value specified in height prop
• animate – true by default, controls animation

import { Skeleton } from '@mantine/core';

function Demo() {
  return (
    <>
      <Skeleton height={50} circle mb="xl" />
      <Skeleton height={8} radius="xl" />
      <Skeleton height={8} mt={6} radius="xl" />
      <Skeleton height={8} mt={6} width="70%" radius="xl" />
    </>
  );
}

With content

If you want to indicate loading state of content that is already on page you can wrap it with Skeleton and control loading overlay visibility with visible prop:

import { useState } from 'react';
import { Skeleton, Button } from '@mantine/core';

function Demo() {
  const [loading, setLoading] = useState(true);

  return (
    <>
      <Skeleton visible={loading}>
        Lorem ipsum dolor sit amet...
        {/* other content */}
      </Skeleton>

      <Button onClick={() => setLoading((l) => !l)}>
        Toggle Skeleton
      </Button>
    </>
  );
}