From fe193044cdf66eef16e854d510ba6981570f5ee7 Mon Sep 17 00:00:00 2001
From: Abhijit Motekar <109235675+AbhijitMotekar99@users.noreply.github.com>
Date: Fri, 25 Oct 2024 20:11:24 +0530
Subject: [PATCH] Preloader added

---
 client/src/App.js                   | 31 ++++++++++++----
 client/src/components/PreLoader.jsx | 22 ++++++++++++
 client/src/styles/Preloader.css     | 55 +++++++++++++++++++++++++++++
 3 files changed, 102 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/PreLoader.jsx
 create mode 100644 client/src/styles/Preloader.css

diff --git a/client/src/App.js b/client/src/App.js
index 491530fb..753782ba 100644
--- a/client/src/App.js
+++ b/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>
   );
 }
diff --git a/client/src/components/PreLoader.jsx b/client/src/components/PreLoader.jsx
new file mode 100644
index 00000000..c30e523b
--- /dev/null
+++ b/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;
diff --git a/client/src/styles/Preloader.css b/client/src/styles/Preloader.css
new file mode 100644
index 00000000..b5e78ac6
--- /dev/null
+++ b/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;
+  }
+}