feat: added loader

Author: GenDelta

package.json

@@ -18,6 +18,8 @@
     "@fontsource/league-gothic": "^5.0.18",
     "@fontsource/poppins": "^5.0.8",
     "@vitejs/plugin-react": "^4.2.1",
+    "baffle": "^0.3.6",
+    "baffle-react": "^0.0.2",
     "framer-motion": "^11.5.4",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",

src/App.jsx

@@ -5,6 +5,7 @@ import routes from "@/routes/index";
 import Navbar from "@/components/Navbar/index";
 import Cursor from "./components/Cursor";
 import CursorVariantProvider from "@/context/CursorVariantProvider";
+import Loader from "@/components/Loader";
 
 const navLinks = [
   { name: "About Us", path: "/about-us" },
@@ -17,22 +18,22 @@ const navLinks = [
 function App() {
   return (
     <CursorVariantProvider>
+      <Loader />
       <AnimatePresence>
-        <Router>
+          <Router>
           <Navbar links={navLinks} />
           <Cursor />
-
           <ToastContainer />
-          <Routes>
-            {routes.map((route) => (
-              <Route
-                path={route.path}
-                element={route.render}
-                key={route.label}
-              />
-            ))}
-          </Routes>
-        </Router>
+            <Routes>
+              {routes.map((route) => (
+                <Route
+                  path={route.path}
+                  element={route.render}
+                  key={route.label}
+                />
+              ))}
+            </Routes>
+          </Router>
       </AnimatePresence>
     </CursorVariantProvider>
   );

src/components/Loader/index.jsx

@@ -0,0 +1,45 @@
+import baffle from "baffle";
+import { useEffect, useState } from "react";
+
+function Loader() {
+    const [isVisible, setIsVisible] = useState(true);
+    const [isDisplayed, setIsDisplayed] = useState(true);
+
+    useEffect(() => {
+        const target = baffle('.loader');
+        target.set({
+            characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█<░▒ ▓/░>",
+            speed: 120
+        });
+        target.start();
+        target.reveal(3000, 100);
+
+        const timer = setTimeout(() => {
+            setIsVisible(false);
+            setTimeout(() => {
+                setIsDisplayed(false);
+            }, 1000); 
+        }, 5000);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    if (!isDisplayed) {
+        return null;
+    }
+
+    return (
+        <div
+            className={`absolute top-0 left-0 w-full h-full flex justify-center items-center bg-secondary-dark bg-opacity-100 transition-opacity duration-1000 ${
+                isVisible ? 'opacity-100' : 'opacity-0'
+            }`}
+            style={{ display: isDisplayed ? 'flex' : 'none' }}
+        >
+            <div className="loader text-secondary-light font-poppins text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl">
+                Welcome to CodeX
+            </div>
+        </div>
+    );
+}
+
+export default Loader;

src/routes/index.jsx

@@ -4,8 +4,15 @@ import About from "@/pages/About/index";
 import Gallery from "@/pages/Gallery/Gallery";
 import Contact from "@/pages/Contact";
 import PageNotFound from "../pages/PageNotFound";
+import Loader from "@/components/Loader";
 
 const routes = [
+  {
+    label: "Loader",
+    path: "/loader",
+    requireAuth: false,
+    render: <Loader />,
+  },
   {
     label: "Contact",
     path: "/contact",