LFFE-17 Implementation of loading for navigation pages dashboard

src/core/components/LoadingHardPage.jsx

@@ -1,4 +1,4 @@
-import {Backdrop, Box, styled} from "@mui/material";
+import {Backdrop, Box, Stack, styled, Typography} from "@mui/material";
 import SvgLoading from "@/core/components/svgs/SvgLoading";
 
 const LoadingImage = styled(Box)({
@@ -9,7 +9,7 @@ const LoadingImage = styled(Box)({
         },
         "50%": {
             // opacity: 1,
-            transform: "scale(2)",
+            transform: "scale(.5)",
         },
         "100%": {
             // opacity: 0,
@@ -19,20 +19,29 @@ const LoadingImage = styled(Box)({
     animation: "load 2s infinite",
 });
 
-const LoadingHardPage = ({children, loading}) => {
+const LoadingHardPage = ({children, loading, sx = {}, icon = null, width = 200, height = 200, label = ''}) => {
     return (
         <>
             <Backdrop
-                sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1}}
+                sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1, ...sx}}
                 open={loading}
             >
-                <LoadingImage
-                    width={100}
-                    height={100}
-                >
-                    <SvgLoading width={100}
-                                height={100}/>
-                </LoadingImage>
+                <Stack alignItems={'center'} spacing={2}>
+                    <LoadingImage
+                        width={width}
+                        height={height}
+                    >
+                        {icon ? (
+                            <Box sx={{color: "primary.main", width: width, height: height}}>
+                                {icon}
+                            </Box>
+                        ) : (
+                            <SvgLoading width={width}
+                                        height={height}/>
+                        )}
+                    </LoadingImage>
+                    <Typography variant={'body2'} sx={{color: "primary.main"}}>{label}</Typography>
+                </Stack>
             </Backdrop>
             {children}
         </>