Fix the dreaded stuttering load issue

LaurierHawkHacks · Mar 27, 2024 · 8ba9460 · 8ba9460
1 parent 59a7034
commit 8ba9460
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
@@ -13,32 +13,41 @@ import {
 const Landing: React.FC = () => {
     const [isLoading, setIsLoading] = useState(true);
 
-        useEffect(() => {
-            const handleLoad = () => {
-                setTimeout(() => {
-                    setIsLoading(false);
-                }, 1000); 
-            };
+    useEffect(() => {
+        const handleLoad = () => {
+            setTimeout(() => {
+                setIsLoading(false);
+            }, 1000); // Extra second after load event
+        };
 
-            window.addEventListener('load', handleLoad);
+        window.addEventListener('load', handleLoad);
 
-            return () => window.removeEventListener('load', handleLoad);
-        }, []);
+        if (document.readyState === 'complete') {
+            setTimeout(() => {
+                setIsLoading(false);
+            }, 1000);
+        }
 
-    if (isLoading) {
-        return <LoadingAnimation />;
-    }
+        return () => window.removeEventListener('load', handleLoad);
+    }, []);
 
     return (
-        <div className="pt-[5rem] transition ease-in">
-            <Navbar />
-            <HeroStatSection />
-            <SponsorFAQSection />
-            <TeamSection />
-            <ContactSection />
-            <FooterSection />
-            <ScrollButton />
-        </div>
+        <>
+            {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>
+        </>
     );
 };