diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index ef2acadc..757101dd 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -9,45 +9,42 @@ import {
ScrollButton,
LoadingAnimation,
} from '@components';
+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 handleLoad = () => {
- setTimeout(() => {
- setIsLoading(false);
- }, 1000); // Extra second after load event
- };
+ const desktopImage = new Image();
+ desktopImage.src = HeroAboutDesktop;
+ desktopImage.onload = () => setComponentLoaded(true);
- window.addEventListener('load', handleLoad);
+ setTimeout(() => setTimerFinished(true), 2000);
+ }, []);
- if (document.readyState === 'complete') {
- setTimeout(() => {
- setIsLoading(false);
- }, 1000);
+ // Once the timer and component are finished -> display the page
+ useEffect(() => {
+ if (componentLoaded && timerFinished) {
+ setIsLoading(false);
}
+ }, [componentLoaded, timerFinished]);
- return () => window.removeEventListener('load', handleLoad);
- }, []);
+ if (isLoading) {
+ return