fix: content glitch over preloader

co-authored-by: Miran Firdausi [email protected]

Author: Miran-Firdausi

.gitignore

@@ -25,4 +25,6 @@ dist-ssr
 
 # package resolution config
 package-lock.json
-yarn.lock
+yarn.lock
+
+.env

package.json

@@ -19,7 +19,6 @@
     "@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

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { AnimatePresence } from "framer-motion";
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
@@ -16,14 +17,23 @@ 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>
-      <Loader />
       <AnimatePresence>
+        {loading ? (
+          <Loader onLoadComplete={handleLoadComplete} />
+        ) : (
           <Router>
-          <Navbar links={navLinks} />
-          <Cursor />
-          <ToastContainer />
+            <Navbar links={navLinks} />
+            <Cursor />
+            <ToastContainer />
             <Routes>
               {routes.map((route) => (
                 <Route
@@ -34,6 +44,7 @@ function App() {
               ))}
             </Routes>
           </Router>
+        )}
       </AnimatePresence>
     </CursorVariantProvider>
   );

src/components/Loader/index.jsx

@@ -1,45 +1,36 @@
 import baffle from "baffle";
-import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useEffect } from "react";
 
-function Loader() {
-    const [isVisible, setIsVisible] = useState(true);
-    const [isDisplayed, setIsDisplayed] = useState(true);
+function Loader({ onLoadComplete }) {
+  useEffect(() => {
+    const target = baffle(".loader");
+    target.set({
+      characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█<░▒ ▓/░>",
+      speed: 120,
+      reveal: 0,
+    });
+    target.start();
+    target.reveal(3000, 0);
 
-    useEffect(() => {
-        const target = baffle('.loader');
-        target.set({
-            characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█<░▒ ▓/░>",
-            speed: 120
-        });
-        target.start();
-        target.reveal(3000, 100);
+    const timer = setTimeout(() => {
+      onLoadComplete();
+    }, 3500);
 
-        const timer = setTimeout(() => {
-            setIsVisible(false);
-            setTimeout(() => {
-                setIsDisplayed(false);
-            }, 1000); 
-        }, 5000);
+    return () => clearTimeout(timer);
+  }, [onLoadComplete]);
 
-        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>
-    );
+  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>
+  );
 }
 
-export default Loader;
+Loader.propTypes = {
+  onLoadComplete: PropTypes.func.isRequired,
+};
+
+export default Loader;