HomeWork1/React/CodePen/src/pages/homePage.js

import  React      						 from "react";
import  { useRef, useState, useEffect }  from "react";
import  Header     						 from "../components/header";
import  CSnippets  						 from "../components/snippet";
import  Footer     						 from "../components/footer";


const Home = () => {
	const [sec, setSec] = useState(2);

	useEffect(() => {
		if(sec === 0) return;
		const interval = setInterval(() => {
 			setSec(sec=>sec-1)
		},200)
		return () => { 
        	clearInterval(interval)	
        }
	}, [sec])

  	return sec===0 ? (
  		<>
	    	<div> 
	      		<Header/>
				<CSnippets/>
				<Footer/>
	    	</div>
    	</>
  	) : (
  		<div className="d-flex justify-content-center">
            <div className="spinner-grow" style={{width: "10rem", height: "10rem", marginTop: "20%"}} role="status">
                <span className="sr-only">Loading...</span>
           	</div>
        </div>
  	)
};

export default Home;