64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
import { Backdrop, Box, Stack, styled, Typography, useTheme } from "@mui/material";
|
|
import SvgLoading from "@/core/components/svgs/SvgLoading";
|
|
import SvgError from "@/core/components/svgs/SvgError";
|
|
|
|
const LoadingImage = styled(Box)({
|
|
"@keyframes load": {
|
|
"0%": {
|
|
// opacity: 0,
|
|
transform: "scale(1)",
|
|
},
|
|
"50%": {
|
|
// opacity: 1,
|
|
transform: "scale(.5)",
|
|
},
|
|
"100%": {
|
|
// opacity: 0,
|
|
transform: "scale(1)",
|
|
},
|
|
},
|
|
animation: "load 2s infinite",
|
|
});
|
|
|
|
const LoadingHardPage = ({
|
|
children,
|
|
loading,
|
|
authState,
|
|
sx = {},
|
|
icon = null,
|
|
width = 200,
|
|
height = 200,
|
|
label = "",
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<>
|
|
<Backdrop sx={{ bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1, ...sx }} open={loading}>
|
|
<Stack alignItems={"center"} spacing={2}>
|
|
{authState ? (
|
|
<Box>
|
|
{icon ? (
|
|
<Box sx={{ color: "primary.main", width: width, height: height }}>{icon}</Box>
|
|
) : (
|
|
<SvgError color={theme.palette.error.main} width={width} height={height} />
|
|
)}
|
|
</Box>
|
|
) : (
|
|
<LoadingImage>
|
|
{icon ? (
|
|
<Box sx={{ color: "primary.main", width: width, height: height }}>{icon}</Box>
|
|
) : (
|
|
<SvgLoading width={width} height={height} />
|
|
)}
|
|
</LoadingImage>
|
|
)}
|
|
<Stack sx={{ color: authState ? "error.main" : "primary.main" }}>{label}</Stack>
|
|
</Stack>
|
|
</Backdrop>
|
|
{children}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LoadingHardPage;
|