initialised commit on the ui converted in mui to astryx and changed the design to doormile

src/components/nearle_components/CircularLoader.js

@@ -1,47 +1,31 @@
-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'
-}));
+import { Spinner } from '@astryxdesign/core/Spinner';
+import nelogo from '../../assets/images/doormile-mark.png';
 
 // ==============================|| Custom Circular Loader with Logo ||============================== //
 const CircularLoader = () => (
-  <LoaderWrapper>
-    {/* Circular Loader */}
-    <CircularProgress
-      color="primary"
-      size={80} // Increase size
-      thickness={6} // Thicker border
-    />
+  <div
+    style={{
+      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)',
+      padding: 20,
+      borderRadius: 10
+    }}
+  >
+    <div style={{ transform: 'scale(2.2)' }}>
+      <Spinner size="xl" />
+    </div>
 
-    {/* Logo Positioned at the Center */}
-    <LogoWrapper>
+    <div style={{ position: 'absolute', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
       <img src={nelogo} alt="Logo" style={{ width: '100%', height: '100%' }} />
-    </LogoWrapper>
-  </LoaderWrapper>
+    </div>
+  </div>
 );
 
 export default CircularLoader;