CFE-15 Implementation of loading for navigation pages dashboard

src/core/components/LoadingHardPage.jsx

@@ -1,5 +1,5 @@
 import SvgLoading from "@/core/components/svgs/SvgLoading";
-import {Backdrop, Box} from "@mui/material";
+import {Backdrop, Box, Stack, Typography} from "@mui/material";
 import {styled} from "@mui/material/styles";
 
 const LoadingImage = styled(Box)({
@@ -10,7 +10,7 @@ const LoadingImage = styled(Box)({
         },
         "50%": {
             // opacity: 1,
-            transform: "scale(2)",
+            transform: "scale(0.5)",
         },
         "100%": {
             // opacity: 0,
@@ -20,20 +20,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.modal + 1}}
+                sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.modal + 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}
         </>

src/core/data/sidebarMenu.jsx

@@ -8,7 +8,7 @@ const sidebarMenu = [
             key: "sidebar.dashboard",
             type: "page",
             route: "/dashboard",
-            icon: <SpaceDashboardIcon />,
+            icon: <SpaceDashboardIcon sx={{width: 'inherit', height: 'inherit'}}/>,
             selected: false,
             permission: "all",
         },
@@ -17,16 +17,16 @@ const sidebarMenu = [
             type: "page",
             name: "expert_management",
             route: "/dashboard/expert-management",
-            icon: <ManageAccountsIcon/>,
+            icon: <ManageAccountsIcon sx={{width: 'inherit', height: 'inherit'}}/>,
             selected: false,
             permission: "all",
         },
         {
             key: "sidebar.role-management",
-            name : "role_management",
+            name: "role_management",
             type: "page",
             route: "/dashboard/role-management",
-            icon: <AccessibilityIcon />,
+            icon: <AccessibilityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
             selected: false,
             permission: "manage_roles",
         },