I've faced a problem with removing preloader from the page smoothly.
At first I had a thought to change content variable and render it on the page but the preloader disappeared too fast.
I have created class .closed there is opacity: 0; but it doesn't work Thanks for help!
const App = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 5000);
});
const content = loading ? <Preloader/> : <h1>Hello world!</h1>
return (
<div className='app'>
{content}
</div>
);
}
In this case try adding an empty dep array to your useEffect and cleaning it up after the your done with a return statement. Try something like this.
useEffect(() => {
const timer = setTimeout(() => {
setLoading(false)
}, 5000);
return () => clearTimeout(timer);
}, []);
This way the the setTimeout is only called once on first render.