Button Loading react-hooks-nextjs - html

Question

I am doing a loading spinner button, When I press the button, the loading icon appears but does not disappear at the marked time, and continues with the load. Here is the code:
componentOne:
import React from 'react'
function Loader(){
return(
<>
<div className="loaderIcon"></div>
<style jsx>
{`
.loaderIcon{
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #3498bd;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
#keyframes spin{
0% { transform: rotate(0deg);}
100% { transform rotate(360deg);}
}
`}
</style>
</>
)
}
export default Loader;
componentTwo:
import React, {useState} from 'react';
import Loader from '../components/loader'
function ButtonLoading(){
const [loading, setLoading] = useState(false)
function loadData(){
setLoading ({loading: false})
setTimeout(()=>{
setLoading({loading: true});
}, 1000);
}
return(
<>
<div>
<button className="btnLoading" onClick={loadData} disabled={loading}>
{loading &&(<Loader/>)}
{loading && <span className="oneSpan">Loading page</span>}
{!loading && <span className="twoSpan">Load page</span>}
</button>
</div>
<style jsx>
{`
.btnLoading{
background-color: green;
}
.oneSpan{
color: red;
font-size: 20px;
}
.twoSpan{
color: black;
font-size: 20px;
}
`}
</style>
</>
)
}
export default ButtonLoading;

Answer 1

I think you got the loading backwards. I believe the function should look like `
function loadData(){
setLoading ({loading: true})
setTimeout(()=>{
setLoading({loading: false});
}, 1000);
}`
SetTimeout runs the function AFTER the timer is up