Merge pull request #65 from codeXsit/codex-baffle-loader

feat: added loader

Author: Miran-Firdausi

package.json

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

src/App.jsx

@@ -1,10 +1,12 @@
+import { useState } from "react";
 import { AnimatePresence } from "framer-motion";
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 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" },
@@ -15,24 +17,34 @@ const navLinks = [
 ];
 
 function App() {
+  const [loading, setLoading] = useState(true);
+
+  // Function to be called when the loader finishes
+  const handleLoadComplete = () => {
+    setLoading(false); // Set loading to false once the loader is done
+  };
+
   return (
     <CursorVariantProvider>
       <AnimatePresence>
-        <Router>
-          <Navbar links={navLinks} />
-          <Cursor />
-
-          <ToastContainer />
-          <Routes>
-            {routes.map((route) => (
-              <Route
-                path={route.path}
-                element={route.render}
-                key={route.label}
-              />
-            ))}
-          </Routes>
-        </Router>
+        {loading ? (
+          <Loader onLoadComplete={handleLoadComplete} />
+        ) : (
+          <Router>
+            <Navbar links={navLinks} />
+            <Cursor />
+            <ToastContainer />
+            <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,36 @@
+import baffle from "baffle";
+import PropTypes from "prop-types";
+import { useEffect } from "react";
+
+function Loader({ onLoadComplete }) {
+  useEffect(() => {
+    const target = baffle(".loader");
+    target.set({
+      characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█<░▒ ▓/░>",
+      speed: 120,
+      reveal: 0,
+    });
+    target.start();
+    target.reveal(3000, 0);
+
+    const timer = setTimeout(() => {
+      onLoadComplete();
+    }, 3500);
+
+    return () => clearTimeout(timer);
+  }, [onLoadComplete]);
+
+  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">
+      <div className="loader text-secondary-light font-medium font-poppins text-3xl sm:text-4xl md:text-5xl xl:text-6xl">
+        Welcome to CodeX
+      </div>
+    </div>
+  );
+}
+
+Loader.propTypes = {
+  onLoadComplete: PropTypes.func.isRequired,
+};
+
+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",