41 lines
984 B
JavaScript
41 lines
984 B
JavaScript
import React, { useEffect } from "react";
|
|
import { Box } from "@mui/material";
|
|
import Spinner from "react-bootstrap/Spinner";
|
|
|
|
const LoadingContainer = ({ loadingText }) => {
|
|
const LoadingContainerStyle = {
|
|
backgroundColor: "rgba(0,0,0,0.5)",
|
|
overflow: "hidden",
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100vw",
|
|
height: "100vh",
|
|
zIndex: 1000, // Ensure it appears above other content
|
|
};
|
|
|
|
useEffect(() => {
|
|
const body = document.querySelector("body");
|
|
body.scrollTop = 0;
|
|
body.style.overflow = "hidden";
|
|
return () => {
|
|
body.style.overflow = "auto";
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
className="d-flex justify-content-center align-items-center"
|
|
style={LoadingContainerStyle}
|
|
>
|
|
<Spinner animation="border" variant="light" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</Spinner>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LoadingContainer;
|