import React from "react";
import { usePromiseTracker } from "react-promise-tracker";
import { Backdrop, CircularProgress } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { css } from "@emotion/core";
const useStyles = makeStyles((theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: "#6200EE",
  },
}));
const Loader = () => {
  const classes = useStyles();
  const { promiseInProgress } = usePromiseTracker();
  return (
    <Backdrop className={classes.backdrop} open={promiseInProgress}>
      <CircularProgress
        css={css`
          color: inherit;
        `}
      />
    </Backdrop>
  );
};

export default Loader;