There are two types of loading screens that you’d ever meet.

They are the skeleton and the spinner.

I think most developer are familiar with the spinner with a text that says "loading...".

But what about skeletons ?

It seems a little more complicated to implement no ?

Actually - It’s quite simple with material ui.

Material UI react supports this out of the box.

Let’s go through a few code examples!

1. Skeleton (No Animation)

Code:

import * as React from 'react';
import {
  Box,
  Skeleton
} from '@mui/material';

const SkeletonBlock = (): React.FC => {
  return (
    <>
      <Box py={1}>
        <Skeleton
          animation={false}
          variant="circular"
          width={40}
          height={40}
        />
      </Box>
      <Skeleton animation={false} />
      <Skeleton animation={false} />
      <Skeleton animation={false} />
    </>
  );
}

2. Skeleton (Wave Animation)

Code:

import * as React from 'react';
import {
  Box,
  Skeleton
} from '@mui/material';

const SkeletonBlock = (): React.FC => {
  return (
    <>
      <Box py={1}>
        <Skeleton
          animation="wave"
          variant="circular"
          width={40}
          height={40}
        />
      </Box>
      <Skeleton animation="wave" />
      <Skeleton animation="wave" />
      <Skeleton animation="wave" />
    </>
  );
}

3. Skeleton (Pulsate Animation)

Code:

import * as React from 'react';
import {
  Box,
  Skeleton
} from '@mui/material';

const SkeletonBlock = (): React.FC => {
  return (
    <>
      <Box py={1}>
        <Skeleton
          variant="circular"
          width={40}
          height={40}
        />
      </Box>
      <Skeleton />
      <Skeleton />
      <Skeleton />
    </>
  );
}

4. Basic (Circular Progress)

Code:

import * as React from 'react';
import {
  Box,
  CircularProgress,
} from '@mui/material';

const BasicLoading = (): React.FC => {
  return (
    <Box py={1} sx={{ textAlign: 'center' }}>
      <Box py={2}>
        <CircularProgress />
      </Box>
      <Typography variant="body2" component="p">
        Loading...
      </Typography>
    </Box>
  );
}

I also recommend this article about the research on skeletons and spinners:

A Bone to Pick with Skeleton Screens | Viget

And... that’s it!

If you like this post be sure to share it with someone you know!

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Build loading screens by example