(Feature) : Added a Loader

Author: Kodiererin

my-app/package-lock.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/package.json

@@ -1,4 +1,7 @@
+// src/App.jsx
+
 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 +10,41 @@ 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); // I have 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} />}
+      {loading ? (
+        <Loader />
+      ) : (
+        <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/App.jsx

@@ -1,7 +1,47 @@
-import React from 'react'
+// src/components/Loader.jsx
+
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import logo from "../assets/images/codex-logo.png";
+
+const Loader = () => {
+  const [showExplore, setShowExplore] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowExplore(true);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
 
-export default function Loader() {
   return (
-    <div>Loader</div>
-  )
-}
+    <div className="flex items-center justify-center h-screen bg-primary">
+      <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 ? 0 : 20 }}
+            transition={{ duration: 0.25 }}
+          >
+            We <span className="text-secondary">Explore</span>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;