BaseLoader.tsx

import React, { useState, useEffect } from 'react';
import { Backdrop, CircularProgress, Typography, Box } from '@material-ui/core';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) => createStyles({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    background: '#0000001f',
  },
  title: {
    marginTop: '1.5rem',
  },
}));

const RANDOM_TEXTS = [
  'Extraordinary', 'Awesomeness', 'Greatness',
  'Beauty', 'Elegance', 'Charm', 'Allure', 'Grace',
  'Wonders', 'Spectacle', 'Amazingness', 'Marvels',
  'Artistry', 'Delicacy', 'Glamour', 'Temptation', 'Attraction',
];

const BaseLoader = () => {
  const [text, setText] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      const randText = RANDOM_TEXTS[Math.floor(Math.random() * RANDOM_TEXTS.length)];

      setText(randText);
    }, 200);

    return () => clearInterval(interval);
  }, []);

  const classes = useStyles();

  return (
    <Backdrop open className={classes.backdrop}>
      <Box className="rainbow-animation" textAlign="center">
        <CircularProgress disableShrink size={100} />
        <Typography className={classes.title}>{`Loading ${text}`}</Typography>
      </Box>
    </Backdrop>
  );
};

export default BaseLoader;