Skeleton

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

Copy
import { Text } from 'minerva-ui';

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

Circular Skeleton#

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

Multi-line Skeleton with Custom Gap#

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

Skeleton Loading States#

Loaded
() => {
  const [loading, setLoading] = 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] = 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.