Merge pull request #49 from Kodiererin/Loader

(Feature) : Added the Unblur effect

Author: whysosaket

Diff for: my-app/src/App.jsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
 import Home from "./pages/Home";
 import About from "./pages/About";
 import NotFound from "./pages/404";
@@ -10,37 +11,44 @@ import Base from "./layouts/Base";
 import Subscribe from "./components/Subscribe";
 import Loader from "./components/Loader";
 
-export default function App() {
-  const [isVisible, setIsVisible] = useState(false);
+// Custom hook to handle the loader
+const useLoader = (duration = 1500) => {
   const [loading, setLoading] = useState(true);
-
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setLoading(false);
-    }, 1500); // Adjusted loader time to 1.5 seconds for smoother transition
+    const timer = setTimeout(() => setLoading(false), duration);
+    return () => clearTimeout(timer); // This is the cleanup timer
+  }, [duration]);
+  return loading;
+};
 
-    return () => clearTimeout(timer); // Cleaning up timer
-  }, []);
-
-  const handleSetVisible = (value) => setIsVisible(value);
+export default function App() {
+  const [isVisible, setVisible] = useState(false);
+  const loading = useLoader(); // Loader logic
 
   return (
     <div className="bg-primary">
-      {isVisible && <Subscribe handle={handleSetVisible} />}
-      <Loader loading={loading} />
+      {isVisible && <Subscribe handle={setVisible} />}
+      {loading && <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>
+        <motion.div
+          initial={{ filter: "blur(10px)" }}
+          animate={{ filter: "blur(0px)" }}
+          transition={{ duration: 0.5 }}
+          className="transition-all duration-400"
+        >
+          <BrowserRouter>
+            <Base>
+              <Routes>
+                <Route path="/" element={<Home handle={setVisible} />} />
+                <Route path="/about-us" element={<About handle={setVisible} />} />
+                <Route path="/community" element={<Community />} />
+                <Route path="/events" element={<Events />} />
+                <Route path="/contact-us" element={<ContactForm />} />
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </Base>
+          </BrowserRouter>
+        </motion.div>
       )}
     </div>
   );

Diff for: my-app/src/components/Loader.jsx

@@ -1,8 +1,10 @@
+// src/components/Loader.jsx
+
 import React, { useEffect, useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 import logo from "../assets/images/codex-logo.png";
 
-const Loader = ({ loading }) => {
+const Loader = () => {
   const [showExplore, setShowExplore] = useState(false);
 
   useEffect(() => {
@@ -14,40 +16,31 @@ const Loader = ({ loading }) => {
   }, []);
 
   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>
+    <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 ? -20 : 0 }}
+            transition={{ duration: 0.25 }}
+          >
+            We <span className="text-secondary">Explore</span>
+          </motion.div>
+        </div>
+      </div>
+    </div>
   );
 };