Skeleton

The <Skeleton /> component renders a subtly animated placeholder for content while fetching data.

import { Text } from 'minerva-ui'

Preview

Source

() => { const [data, setData] = React.useState(''); return <div>{data ? <Text>test</Text> : <Skeleton />}</div>; }

() => {
  const [data, setData] = React.useState('');
  return <div>{data ? <Text>test</Text> : <Skeleton />}</div>;
}

Circular Skeleton

Preview

Source

() => <Skeleton height="100px" width="100px" borderRadius="full" />

() => <Skeleton height="100px" width="100px" borderRadius="full" />

Multi-line Skeleton with Custom Gap

Preview

Source

() => { const [data, setData] = React.useState(''); return ( <div> {data ? ( <Text>test</Text> ) : ( <Skeleton count={3} width="500px" gap="15px" /> )} </div> ); }

() => {
  const [data, setData] = React.useState('');
  return (
    <div>
      {data ? (
        <Text>test</Text>
      ) : (
        <Skeleton count={3} width="500px" gap="15px" />
      )}
    </div>
  );
}

Skeleton Loading States

Preview

Source

() => { const [loading, setLoading] = React.useState(false); return ( <> <Button mb="10px" onClick={() => setLoading(prevState => !prevState)}> {loading ? 'Loading...' : 'Loaded'} </Button> <div> {!loading ? ( <Image src="https://source.unsplash.com/nc8Qwfie-tU/400x400" height="200px" width="200px" alt="A field with sheep" /> ) : ( <Skeleton width="200px" height="200px" /> )} </div> </> ); }

() => {
  const [loading, setLoading] = React.useState(false);
  return (
    <>
      <Button mb="10px" onClick={() => setLoading(prevState => !prevState)}>
        {loading ? 'Loading...' : 'Loaded'}
      </Button>
      <div>
        {!loading ? (
          <Image
            src="https://source.unsplash.com/nc8Qwfie-tU/400x400"
            height="200px"
            width="200px"
            alt="A field with sheep"
          />
        ) : (
          <Skeleton width="200px" height="200px" />
        )}
      </div>
    </>
  );
}

Props

These are props related to the Skeleton component.

Name	Type	Is Required	Default	Description
count	number	optional	1	Count of multi-line skeleton
circle	boolean	optional	false	Sets if skeleton is a circle
gap	string	optional	10px	Sets space between multi-line skeletons
height	string	optional	2em	Sets height of skeleton
width	string	optional	100%	Sets width of skeleton