Framer Motion Loader animation - reactjs

Question

I'm new to reactjs, I made a preloader animation using Framer motion, but I want to add animation like fade out when loading finishes, or some smooth transition between load and showing my page
This is my Loader.js component
import React from "react";
import { motion } from "framer-motion";
const style = {
width: 20,
height: 20,
opacity: 1,
margin: 8,
borderRadius: 0,
display: "inline-block",
background: "#c81c60",
}
const variants = {
start: {
scale: 0.2,
rotate: 0,
},
end: {
scale: 1,
rotate: 360,
},
}
export default function Loader(props) {
return (
<div className="loader">
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
transition={{
repeat: "Infinity",
repeatType: "reverse",
ease: "anticipate",
duration: 1,
delay: 0
}}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
transition={{
repeat: "Infinity",
repeatType: "reverse",
ease: "anticipate",
duration: 1,
delay: 0.2
}}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
transition={{
repeat: "Infinity",
repeatType: "reverse",
ease: "anticipate",
duration: 1,
delay: 0.4
}}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
transition={{
repeat: "Infinity",
repeatType: "reverse",
ease: "anticipate",
duration: 1,
delay: 0.6
}}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
transition={{
repeat: "Infinity",
repeatType: "reverse",
ease: "anticipate",
duration: 1,
delay: 0.8
}}
/>
</div>
)
}
and here is where I'm showing it
import React, {useState, useEffect, useRef} from 'react'
import Navbar from '../Navbar'
import { HeroContainer, HeroBg } from './HeroElements'
import Sidebar from '../Navbar/Sidebar'
import {
useViewportScroll,
motion,
useTransform,
useMotionValue, AnimatePresence
} from 'framer-motion';
import Jobs from '../Jobs';
import { useInView } from 'react-intersection-observer';
import Footer from '../Footer';
import TypeIt from "typeit-react";
import Loader from '../Loader';
const SuperStrong = () => {
return <span style={{ color: "white" }}>your </span>;
};
const parallaxData = [
{
start: 0,
end: 500,
properties: [
{
startValue: 1,
endValue: 2,
property: 'scale',
},
],
},
];
const HeroSection = () => {
const [loading, setLoading] = useState(false);
useEffect(()=>{
setLoading(true)
setTimeout(() => {
setLoading(false);
}, 2000);
}, [])
const variants = {
visible: { opacity: 1, scale: 1, y: 0 },
hidden: {
opacity: 0,
scale: 0.65,
y: 50
}
};
const { scrollY } = useViewportScroll();
const y1 = useTransform(scrollY, [0, 300], [0, 200]);
const y2 = useTransform(scrollY, [0, 300], [0, -100]);
const [ref, inView, entry] = useInView({
/* Optional options */
threshold: 1,
triggerOnce: false
});
const [isOpen, setIsOpen]= useState(false);
const toggle = () => {
setIsOpen(!isOpen);
}
const fadeInDown = {
initial: {
y:-60,
opacity: 0,
},
animate: {
y: 0,
opacity: 1,
transition: {
duration: 0.5,
delay: 1.5,
ease: "easeInOut",
},
},
};
const fadeInUp = {
initial: {
x:0,
opacity: 0,
},
animate: {
x: 15,
opacity: 1,
transition: {
duration: 1,
delay: 0.5,
ease: "easeInOut",
},
},
};
const fadeIn = {
initial: {
x:140,
opacity: 0,
},
animate: {
x: 70,
opacity: 1,
transition: {
duration: 1,
delay: 0.5,
ease: "easeInOut",
},
},
};
return (
<>
{loading ?
(
<Loader loading={loading} />
) : (
<>
<HeroContainer>
<HeroBg>
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar toggle={toggle} />
<div className="maintext" style={{position:'relative'}}>
<TypeIt >
<h1>transforming <SuperStrong></SuperStrong>digital workspace</h1>
</TypeIt>
</div>
</HeroBg>
</HeroContainer>
<Jobs></Jobs>
</>
)}
</>
)
}
export default HeroSection
I'm really having trouble making some nice animation when loading finishes, can anybody help me please?