All files / src/utils/components ProgressOverlay.tsx

33.33% Statements 4/12
0% Branches 0/10
0% Functions 0/4
36.36% Lines 4/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95            1x                                                                     1x                                 1x                           1x                                            
import React from "react";
import { CircularProgress, Theme, Typography } from "@mui/material";
import { BrokenImageOutlined as ErrorIcon } from "@mui/icons-material";
import clsx from "clsx";
import { createStyles, makeStyles } from "@mui/styles";
 
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    overlay: {
      position: "fixed",
      height: "100%",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 2,
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignContent: "center"
      // paddingTop: '45%',
    },
    blur: {
      backgroundColor: "rgba(0,0,0,0.1)" // almost transparent
    },
    overlayContent: {
      margin: "auto",
      width: "60%",
      textAlign: "center"
    }
  })
);
 
interface Props {
  children: React.ReactNode;
  loading: boolean;
  loadingMessage?: string;
  delayRender?: boolean;
  error?: string;
}
 
const Loader = ({ loadingMessage }: { loadingMessage: string }) => {
  const classes = useStyles();
 
  return (
    <div
      className={clsx(classes.overlay, classes.blur)}
      data-testid="loader-message"
    >
      <div className={classes.overlayContent}>
        <CircularProgress thickness={0.8} size={50} />
        <br />
        {loadingMessage}
      </div>
    </div>
  );
};
 
const Error = ({ errorMessage }: { errorMessage: string }) => {
  const classes = useStyles();
 
  return (
    <div className={classes.overlay}>
      <div className={classes.overlayContent}>
        <ErrorIcon fontSize="large" />
        <br />
        <Typography variant="h6">{errorMessage}</Typography>
      </div>
    </div>
  );
};
 
const ProgressOverlay: React.FC<Props> = ({
  children,
  loading,
  loadingMessage = "Loading...",
  delayRender = false,
  error
}) => {
  if (loading && delayRender) return <Loader loadingMessage={loadingMessage} />;
 
  return (
    <>
      {error ? <Error errorMessage={error} /> : children}
      {!loading ? (
        ""
      ) : (
        <Loader loadingMessage={loadingMessage} data-testid="loader-message" />
      )}
    </>
  );
};
 
export default ProgressOverlay;