From fd690a86cea36d6c658341fc70e0d07b0d4dec5a Mon Sep 17 00:00:00 2001
From: Gabriel Diniz <gabriel.sundiniz@gmail.com>
Date: Wed, 27 Mar 2024 19:14:43 -0400
Subject: [PATCH 1/3] Update: loading animation is conditional

---
 src/pages/Landing.tsx | 51 +++++++++++++++++++------------------------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index ef2acadc..8b2245a4 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -9,45 +9,38 @@ import {
     ScrollButton,
     LoadingAnimation,
 } from '@components';
+import { HeroAboutDesktop } from '@assets';
 
 const Landing: React.FC = () => {
     const [isLoading, setIsLoading] = useState(true);
+    const [componentLoaded, setComponentLoaded] = useState(false);
 
     useEffect(() => {
-        const handleLoad = () => {
-            setTimeout(() => {
-                setIsLoading(false);
-            }, 1000); // Extra second after load event
-        };
-
-        window.addEventListener('load', handleLoad);
+        const image = new Image();
+        image.src = HeroAboutDesktop;
+        image.onload = () => setComponentLoaded(true);
+    }, []);
 
-        if (document.readyState === 'complete') {
-            setTimeout(() => {
-                setIsLoading(false);
-            }, 1000);
+    useEffect(() => {
+        if (componentLoaded) {
+            setIsLoading(false);
         }
+    }, [componentLoaded]);
 
-        return () => window.removeEventListener('load', handleLoad);
-    }, []);
+    if (isLoading) {
+        return <LoadingAnimation />;
+    }
 
     return (
-        <>
-            {isLoading && (
-                <div className="loading-overlay">
-                    <LoadingAnimation />
-                </div>
-            )}
-            <div className={`pt-[5rem] transition ease-in ${isLoading ? 'hidden' : 'block'}`}>
-                <Navbar />
-                <HeroStatSection />
-                <SponsorFAQSection />
-                <TeamSection />
-                <ContactSection />
-                <FooterSection />
-                <ScrollButton />
-            </div>
-        </>
+        <div className="pt-[5rem] transition ease-in">
+            <Navbar />
+            <HeroStatSection />
+            <SponsorFAQSection />
+            <TeamSection />
+            <ContactSection />
+            <FooterSection />
+            <ScrollButton />
+        </div>
     );
 };
 

From 4880e0ef7faa4c91447ecefa863939952fb9f3e1 Mon Sep 17 00:00:00 2001
From: Gabriel Diniz <gabriel.sundiniz@gmail.com>
Date: Wed, 27 Mar 2024 19:34:40 -0400
Subject: [PATCH 2/3] Rename variables

---
 src/pages/Landing.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 8b2245a4..e6825547 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -16,9 +16,10 @@ const Landing: React.FC = () => {
     const [componentLoaded, setComponentLoaded] = useState(false);
 
     useEffect(() => {
-        const image = new Image();
-        image.src = HeroAboutDesktop;
-        image.onload = () => setComponentLoaded(true);
+        const desktopImage = new Image();
+
+        desktopImage.src = HeroAboutDesktop;
+        desktopImage.onload = () => setComponentLoaded(true);
     }, []);
 
     useEffect(() => {

From 5ef7433a5c51fa0a5878cdf4ea5519057f60a0d1 Mon Sep 17 00:00:00 2001
From: Gabriel Diniz <gabriel.sundiniz@gmail.com>
Date: Wed, 27 Mar 2024 20:08:49 -0400
Subject: [PATCH 3/3] Add 2 second to timer

---
 src/pages/Landing.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index e6825547..757101dd 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -14,19 +14,22 @@ import { HeroAboutDesktop } from '@assets';
 const Landing: React.FC = () => {
     const [isLoading, setIsLoading] = useState(true);
     const [componentLoaded, setComponentLoaded] = useState(false);
+    const [timerFinished, setTimerFinished] = useState(false);
 
     useEffect(() => {
         const desktopImage = new Image();
-
         desktopImage.src = HeroAboutDesktop;
         desktopImage.onload = () => setComponentLoaded(true);
+
+        setTimeout(() => setTimerFinished(true), 2000);
     }, []);
 
+    // Once the timer and component are finished -> display the page
     useEffect(() => {
-        if (componentLoaded) {
+        if (componentLoaded && timerFinished) {
             setIsLoading(false);
         }
-    }, [componentLoaded]);
+    }, [componentLoaded, timerFinished]);
 
     if (isLoading) {
         return <LoadingAnimation />;