init project

src/core/components/LoadingHardPage.jsx

@@ -0,0 +1,44 @@
+import { Backdrop, Fade, styled } from "@mui/material";
+import StyledImage from "./StyledImage";
+
+const LoadingImage = styled(StyledImage)({
+  "@keyframes load": {
+    "0%": {
+      // opacity: 0,
+      transform: "scale(1)",
+    },
+    "50%": {
+      // opacity: 1,
+      transform: "scale(2)",
+    },
+    "100%": {
+      // opacity: 0,
+      transform: "scale(1)",
+    },
+  },
+  animation: "load 2s infinite",
+});
+
+const LoadingHardPage = ({ children, loading }) => {
+  return (
+    <>
+      <Backdrop
+        sx={{ bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={loading}
+      >
+        <Fade in={true}>
+          <LoadingImage
+            src={"/images/logo.svg"}
+            alt="loading marhaba"
+            priority
+            width={100}
+            height={100}
+          />
+        </Fade>
+      </Backdrop>
+      {children}
+    </>
+  );
+};
+
+export default LoadingHardPage;