code handover

src/components/CircularLoader.js

@@ -0,0 +1,47 @@
+import { styled } from '@mui/material/styles';
+import CircularProgress from '@mui/material/CircularProgress';
+import nelogo from '../assets/images/logo-sm.png';
+
+// Styled Loader Wrapper
+const LoaderWrapper = styled('div')(() => ({
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  zIndex: 2001,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: 'rgba(255, 255, 255, 0.7)', // Light overlay effect
+  padding: '20px',
+  borderRadius: '10px' // Soft rounded border
+}));
+
+// Styled Logo Wrapper
+const LogoWrapper = styled('div')(() => ({
+  position: 'absolute',
+  width: '40px', // Adjust based on your logo size
+  height: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+}));
+
+// ==============================|| Custom Circular Loader with Logo ||============================== //
+const CircularLoader = () => (
+  <LoaderWrapper>
+    {/* Circular Loader */}
+    <CircularProgress
+      color="primary"
+      size={80} // Increase size
+      thickness={6} // Thicker border
+    />
+
+    {/* Logo Positioned at the Center */}
+    <LogoWrapper>
+      <img src={nelogo} alt="Logo" style={{ width: '100%', height: '100%' }} />
+    </LogoWrapper>
+  </LoaderWrapper>
+);
+
+export default CircularLoader;