(Feature) : Implemented Suggestions

Author: Kodiererin

my-app/src/App.jsx

@@ -1,5 +1,3 @@
-// src/App.jsx
-
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useState, useEffect } from "react";
 import Home from "./pages/Home";
@@ -19,7 +17,7 @@ export default function App() {
   useEffect(() => {
     const timer = setTimeout(() => {
       setLoading(false);
-    }, 1500); // I have Adjusted loader time to 1.5 seconds for smoother transition
+    }, 1500); // Adjusted loader time to 1.5 seconds for smoother transition
 
     return () => clearTimeout(timer); // Cleaning up timer
   }, []);
@@ -29,9 +27,8 @@ export default function App() {
   return (
     <div className="bg-primary">
       {isVisible && <Subscribe handle={handleSetVisible} />}
-      {loading ? (
-        <Loader />
-      ) : (
+      <Loader loading={loading} />
+      {!loading && (
         <BrowserRouter>
           <Base>
             <Routes>

my-app/src/components/Loader.jsx

@@ -1,10 +1,8 @@
-// src/components/Loader.jsx
-
 import React, { useEffect, useState } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import logo from "../assets/images/codex-logo.png";
 
-const Loader = () => {
+const Loader = ({ loading }) => {
   const [showExplore, setShowExplore] = useState(false);
 
   useEffect(() => {
@@ -16,31 +14,40 @@ const Loader = () => {
   }, []);
 
   return (
-    <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>
+    <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>
   );
 };