Preloader added

client/src/App.js

@@ -5,16 +5,35 @@ import { UserProvider } from './store/userContext';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Layout from './components/Layout';
+import { useState, useEffect } from 'react';
+import Preloader from './components/PreLoader';
 
 function App() {
+  // Preloader state
+  const [isPreloaderVisible, setIsPreloaderVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsPreloaderVisible(false);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <div className="App">
-      <Router>
-        <UserProvider>
-          <Layout />
-        </UserProvider>
-      </Router>
-      <ToastContainer />
+      {isPreloaderVisible ? (
+        <Preloader />
+      ) : (
+        <>
+          <Router>
+            <UserProvider>
+              <Layout />
+            </UserProvider>
+          </Router>
+          <ToastContainer />
+        </>
+      )}
     </div>
   );
 }

client/src/components/PreLoader.jsx

@@ -0,0 +1,22 @@
+import "../styles/Preloader.css";
+
+const Preloader = () => {
+  return (
+    <div className="preloader">
+      <svg viewBox="0 0 1320 300">
+        <text
+          x="50%"
+          y="50%"
+          dy=".35em"
+          textAnchor="middle"
+          className="animate-stroke"
+          style={{ fontWeight: "bold" }}
+        >
+          Med Space
+        </text>
+      </svg>
+    </div>
+  );
+};
+
+export default Preloader;

client/src/styles/Preloader.css

@@ -0,0 +1,55 @@
+.preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
+  background : linear-gradient(135deg, #202a38  10%, #3b5273  100%);
+}
+
+/* Text animation */
+.animate-stroke {
+  text-transform: uppercase;
+  animation: stroke 2.5s infinite alternate;
+  stroke-width: 2;
+  stroke: rgb(255, 255, 255);
+  font-size: 105px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+}
+
+/* Keyframes for the stroke animation */
+@keyframes stroke {
+  0% {
+    fill: #fff;
+    stroke: #62daff;
+    stroke-dashoffset: 25%;
+    stroke-dasharray: 0 50%;
+    stroke-width: 3;
+  }
+
+  70% {
+    fill: #fff;
+    stroke: #62daff;
+  }
+
+  80% {
+    fill: #fff;
+    stroke: #85dffa;
+    stroke-width: 2;
+  }
+
+  100% {
+    fill: #fff;
+    stroke: #30cefe;
+    stroke-dashoffset: -25%;
+    stroke-dasharray: 50% 0;
+    stroke-width: 0;
+    text-shadow: 0 0 10px #fff, 0 0 15px whitesmoke;
+  }
+}