Currently, I am developing an app using Next.js and I am facing a challenge with implementing a loading animation. The animation I am attempting to incorporate consists of three bouncing balls which display correctly. When I launch the Next.js app with npm run dev, the animation works as expected and reloads properly when I refresh the page. However, if I navigate to a different route, the animation fails to appear. The elements seem to be missing altogether. I am unsure of the reason behind this issue and have included the code below for context.
import React from "react";
import Image from 'next/image'
import styled from "styled-components";
const Screen = styled.div`
position: relative;
height: 100vh;
width: 100%;
opacity: 0;
animation: fade 0.4s ease-in forwards;
@keyframes fade {
0% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
`;
const Balls = styled.div`
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
background: #E60E33;
margin: 0 60px 0 0;
animation: oscillate 0.7s ease-in forwards infinite;
}
.one {
animation-delay: 0.5s;
}
.two {
animation-delay: 1s;
}
.three {
animation-delay: 1.5s;
}
@keyframes oscillate {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
`;
function MyApp({ Component, pageProps }) {
const [loading, setLoading] = React.useState(false);
React.useEffect(() =>{
setTimeout(() => setLoading(true), 5000);
})
return (
<>
{loading ? (
<React.Fragment>
<Component {...pageProps} />
</React.Fragment>
) : (
<Screen>
<div
style={{
display: "flex",
position: "absolute",
top: "35%",
left: "48%",
transform: "translate(-50%, -50%)"
}}
>
</div>
<Balls>
<div className="ball one"></div>
<div className="ball two"></div>
<div className="ball three"></div>
</Balls>
</Screen>
)}
</>
);
}
export default MyApp