Added Preloader

client/src/components/Preloader/Preloader.css

@@ -1,7 +1,3 @@
-body{
-    overflow: hidden;
-}
-
 .preloader {
     position: fixed;
     top: 0;
@@ -18,6 +14,10 @@ body{
     transform: translate3d(0, 0, 0);
 }
 
+body.preloader-active {
+    overflow: hidden;
+}
+
 .preloader-animation {
     width: 500px;
     height: 500px;

client/src/components/Preloader/Preloader.jsx

@@ -4,25 +4,34 @@ import preloaderAnimation from "./Preloader.json";
 import "./Preloader.css";
 
 const Preloader = () => {
-  const [fadeIn, setFadeIn] = useState(true);
-  const [loading, setLoading] = useState(true);
+    const [fadeIn, setFadeIn] = useState(true);
+    const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    const timeout = setTimeout(async () => {
-      setFadeIn(false);
-      await new Promise(resolve => setTimeout(resolve, 500)); 
-    }, 2500);
+    useEffect(() => {
+        const timeout = setTimeout(async () => {
+            setFadeIn(false);
+            await new Promise(resolve => setTimeout(resolve, 500));
+            setLoading(false);
+        }, 2500);
 
-    return () => clearTimeout(timeout);
-  }, []);
+        return () => clearTimeout(timeout);
+    }, []);
 
-  if (!loading) return null;
+    useEffect(() => {
+        if (loading) {
+            document.body.classList.add('preloader-active');
+        } else {
+            document.body.classList.remove('preloader-active');
+        }
+    }, [loading]);
 
-  return (
-    <div className={`preloader ${fadeIn ? "fade-in" : "fade-out"}`}>
-      <Lottie className="preloader-animation" animationData={preloaderAnimation} />
-    </div>
-  );
+    if (!loading) return null;
+
+    return (
+        <div className={`preloader ${fadeIn ? "fade-in" : "fade-out"}`}>
+            <Lottie className="preloader-animation" animationData={preloaderAnimation} />
+        </div>
+    );
 };
 
-export default Preloader;
+export default Preloader;