Merge pull request #46 from Kodiererin/Loader

Added a loader in the web-app.

my-app/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@headlessui/react": "^2.1.8",
     "@wojtekmaj/react-hooks": "^1.21.0",
-    "framer-motion": "^11.5.6",
+    "framer-motion": "^11.11.7",
+    "my-app": "file:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",

my-app/src/App.jsx

@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useState, useEffect } from "react";
 import Home from "./pages/Home";
 import About from "./pages/About";
 import NotFound from "./pages/404";
@@ -7,32 +8,40 @@ import ContactForm from "./pages/Contact";
 import Events from "./pages/Events";
 import Base from "./layouts/Base";
 import Subscribe from "./components/Subscribe";
-import { useState } from "react";
-// import NewsletterPage from "./pages/NewsletterPage";
+import Loader from "./components/Loader";
 
 export default function App() {
-  const [isVisible, setIsVisible] = useState(false);  
-
-  const handleSetVisible = (value)=>{
-    setIsVisible(value);
-  };
+  const [isVisible, setIsVisible] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500); // Adjusted loader time to 1.5 seconds for smoother transition
+
+    return () => clearTimeout(timer); // Cleaning up timer
+  }, []);
+
+  const handleSetVisible = (value) => setIsVisible(value);
 
   return (
     <div className="bg-primary">
-      {isVisible&&<Subscribe handle={handleSetVisible} />}
-      <BrowserRouter>
-        <Base>
-          <Routes>
-            <Route path="/" element={<Home handle={handleSetVisible} />} />
-            <Route path="/about-us" element={<About handle={handleSetVisible} />} />
-            <Route path="/community" element={<Community />} />
-            <Route path="/events" element={<Events />} />
-            <Route path="/contact-us" element={<ContactForm />} />
-            {/* <Route path="/newsletter" element={<NewsletterPage />} /> */}
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </Base>
-      </BrowserRouter>
+      {isVisible && <Subscribe handle={handleSetVisible} />}
+      <Loader loading={loading} />
+      {!loading && (
+        <BrowserRouter>
+          <Base>
+            <Routes>
+              <Route path="/" element={<Home handle={handleSetVisible} />} />
+              <Route path="/about-us" element={<About handle={handleSetVisible} />} />
+              <Route path="/community" element={<Community />} />
+              <Route path="/events" element={<Events />} />
+              <Route path="/contact-us" element={<ContactForm />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Base>
+        </BrowserRouter>
+      )}
     </div>
   );
 }

my-app/src/components/Loader.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import logo from "../assets/images/codex-logo.png";
+
+const Loader = ({ loading }) => {
+  const [showExplore, setShowExplore] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowExplore(true);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {loading && (
+        <motion.div
+          className="flex items-center justify-center h-screen bg-primary"
+          initial={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -100 }} // Exit animation: fades and slides up
+          transition={{ duration: 0.5 }}
+        >
+          <div className="flex flex-col items-center">
+            <img src={logo} alt="Logo" className="w-25" />
+
+            <div className="relative text-white text-1xl mt-0.5">
+              <motion.div
+                className="relative"
+                initial={{ opacity: 1, y: 0 }}
+                animate={{ opacity: showExplore ? 0 : 1, y: showExplore ? -20 : 0 }}
+                transition={{ duration: 0.25 }}
+              >
+                We <span className="text-secondary">Code</span>
+              </motion.div>
+
+              <motion.div
+                className="relative"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: showExplore ? 1 : 0, y: showExplore ? -20 : 0 }}
+                transition={{ duration: 0.25 }}
+              >
+                We <span className="text-secondary">Explore</span>
+              </motion.div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Loader;