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 ; + } return ( - <> - {isLoading && ( -
- -
- )} -
- - - - - - - -
- +
+ + + + + + + +
); };