I am working on a NextJS app and I want to implement an initial loading screen that only appears during the first load. Currently, the loading screen pops up not only on the initial load but also whenever a link is clicked that directs the user back to the home screen. In React, I could easily achieve this using window.onload(loaded()) but in NextJS, how can I accomplish the same result without relying on the window object? My main goal is to ensure that the loaded() function runs only once during the initial app load.
Below is my code, any help would be appreciated:
import Head from 'next/head';
import { useState, useEffect } from 'react';
import {
Navbar,
Hero,
Showcase,
Skills,
Services,
Footer,
ProjectCard,
Loader,
} from '../components';
const Loadera = () => {
return (
<div className="bg-blue-500 h-[100vh] w-[100vw] flex items-center justify-center text-center flex-col">
<h1 className="text-white mb-4 text-5xl ">Welcome!</h1>
<h1 className="text-white mb-4 text-2xl ">One Moment Please...</h1>
<Loader size="lg" />
</div>
);
};
export default function Home() {
const [loading, setLoading] = useState(true);
const loaded = () => {
setTimeout(() => {
setLoading(false);
}, 1500);
};
useEffect(() => {
loaded();
}, []);
return (
<div>
<Head>
<title>Seth's Place</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
></meta>
</Head>
{loading ? (
<Loadera />
) : (
<div className="min-h-screen">
<div className="image-bg">
<Navbar />
<Hero />
</div>
<ProjectCard />
<Skills />
<Services />
<Footer />
</div>
)}
</div>
);
}