import React, { useContext } from "react"; import Modal from "@material-ui/core/Modal"; import { Box } from "@material-ui/core"; import { GrammarContext } from "../context/GrammarContext"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles((theme) => ({ container: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", }, })); export default function Loading() { const classes = useStyles(); const { open } = useContext(GrammarContext); return ( <Modal open={open} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" > <div className={classes.container}> <Box fontSize="h5.fontSize" bgcolor="white" p={1} px={3} borderRadius="5px" color="grey" border={2} borderColor="text.primary" > Processing ... </Box> </div> </Modal> ); }