import React, { useEffect, useState } from "react";
import "./App.css";
import Header from "./components/header";
import Home from "./components/home";
import WhatIDo from "./components/WhatIDo";
import Skills from "./components/Skills";
import Projects from "./components/projects";
import Experience from "./components/Experience";
import Contact from "./components/Contact";
import Footer from "./components/footer";
import { ClipLoader } from "react-spinners";
function App() {
const [load, setload] = useState(true);
useEffect(() => {
setTimeout(() => {
setload(false);
}, 2000);
});
return (
<>
{load ? (
<div className="h-screen bg-white flex justify-center items-center">
<ClipLoader size={40} />
</div>
) : (
<div>
<Header />
<Home />
<WhatIDo />
<Skills />
<Projects />
<Experience />
<Contact />
<Footer />
</div>
)}
</>
);
}
export default App;
currently i have used the load state which will be false after 2 second and the div with all the components will show up but it does not mean the div is loaded completely it can take more or less than 2 second for loading so i want to make the load state false only when the div with components is finished loading how can i do that??
2
Here’s one way you can do it. You can directly add a state to capture the data that you are fetching. You can then use that if it already has a value. Here’s the updated code.
function App() {
const [data, setData] = useState()
useEffect(() => {
const fetchData = async () => {
const result = await fetch('/api/GET_YOUR_DATA')
setData(result.data)
}
fetchData()
}, []);
return (
<>
{!data ? (
<div className="h-screen bg-white flex justify-center items-center">
<ClipLoader size={40} />
</div>
) : (
<div>
<Header />
<Home />
<WhatIDo />
<Skills />
<Projects />
<Experience />
<Contact />
<Footer />
</div>
)}
</>
);
}
export default App;