Feature/fixe bugs

src/core/components/LoadingHardPage.jsx

@@ -0,0 +1,65 @@
+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>
+                    )}
+                    <Typography variant={"body2"} sx={{ color: authState ? "error.main" : "primary.main" }}>
+                        {label}
+                    </Typography>
+                </Stack>
+            </Backdrop>
+            {children}
+        </>
+    );
+};
+
+export default LoadingHardPage;