game_web_uk/src/components/Loading/LoadingCircular.jsx

import React, {useEffect, useState} from "react";
import {CircularProgress} from "@mui/material";

const LoadingCircular=()=>{
    const [isShow, setIsShow] = useState(false);
    const [showMask,setShowMask]=useState(false);
    const show=(showMask=false)=>{
        setIsShow(true);
        setShowMask(showMask);
    }
    const hide=()=>{
        setIsShow(false);
    }
    useEffect(()=>{
        const loadingCircular={
            show,
            hide
        };
        global.loadingCircular=loadingCircular;
        return () => {
            if (global.loadingCircular === loadingCircular) delete global.loadingCircular;
        };
    },[])
    return (
        <>
            {
                isShow? (
                    <div className={`loading-circular ${showMask?'loading-circular_mask':''}`}>
                        <CircularProgress color="success" size={40} thickness={4}/>
                    </div>
                ):(<></>)
            }
        </>
    )
}
export default LoadingCircular;