add loader

src/App.js

@@ -10,6 +10,7 @@ import Checkout from './pages/Checkout';
 import Navbar from './components/Navbar';
 import Footer from './components/Footer/Footer';
 import Header from './components/Header';
+import Loader from './components/Loader';
 import theme from './theme/theme';
 import { ThemeProvider } from '@mui/material';
 import { fetchCart, createCart } from './redux/slices/cartSlice';
@@ -43,6 +44,8 @@ function App() {
 
   return (
     <ThemeProvider theme={theme}>
+      
+      <Loader />
       <Header />
       <Navbar />
       <BrowserRouter>

src/components/Loader/Loader.jsx

@@ -0,0 +1,45 @@
+import {useState, useEffect} from 'react';
+import { Box, Typography } from '@mui/material';
+import logoSrc from '../../assets/images/amberlogo.png'
+import { useSelector } from 'react-redux';
+
+
+const Loader = () => {
+
+  const products = useSelector((state) => state.products.products.data) // only used as referenced
+  const [display, setDisplay] = useState(true)
+
+  useEffect(() => {
+    
+    if (products.length > 0) {
+      setDisplay(false)
+    }
+
+  }, [products])
+  
+
+  return (
+    <Box sx={{
+      width: "100%",
+      height: "100%",
+      backgroundColor: "white",
+      position: "fixed",
+      display: (display) ? "flex" : "none",
+      alignItems:"center",
+      justifyContent:"center",
+      zIndex: 999
+    }}>
+      <Box sx={{display:"flex", alignItems:"center"}}>
+        <img src={logoSrc} alt="Logo"
+          style={{
+            width: 150,
+            height: 25,
+          }} />
+
+        <div class="loader" style={{marginLeft:"20px"}}></div>
+      </Box>
+    </Box>
+  );
+};
+
+export default Loader;

src/components/Loader/index.js

@@ -0,0 +1 @@
+export { default } from "./Loader"

src/components/Navbar/Navbar.jsx

@@ -259,6 +259,7 @@ const Navbar = () => {
     <>
       <AppBar position="fixed"
         sx={{
+          zIndex:998,
           backgroundColor: (isAtTop) ? "rgba(0, 0, 0, 0)" : "rgba(255, 255, 255, 0.3)",
           backdropFilter: (isAtTop) ? "none" : "blur(10px)",
           boxShadow: 0,
@@ -336,7 +337,6 @@ const Navbar = () => {
                     height: 25,
                   }} />
               </a>
-              
             </Box>
 
             {/* Center Section: Nav Items */}

src/index.css

@@ -390,9 +390,25 @@
 .loader {
   width: 50px;
   aspect-ratio: 1;
+  display: grid;
+  border: 4px solid #0000;
   border-radius: 50%;
-  border: 8px solid;
-  border-color: #000 #0000;
-  animation: l1 1s infinite;
+  border-right-color: #95AAC5;
+  animation: l15 1s infinite linear;
 }
-@keyframes l1 {to{transform: rotate(.5turn)}}
+.loader::before,
+.loader::after {    
+  content: "";
+  grid-area: 1/1;
+  margin: 2px;
+  border: inherit;
+  border-radius: 50%;
+  animation: l15 2s infinite;
+}
+.loader::after {
+  margin: 8px;
+  animation-duration: 3s;
+}
+@keyframes l15{ 
+  100%{transform: rotate(1turn)}
+}