CODEWITHSUNDEEP
htmlcssreact-hooksnext.js
Angel
Angel

Reputation: 13

Button Loading react-hooks-nextjs

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;

Upvotes: 1

Views: 3290

Answers (1)

Zach Fey
Zach Fey

Reputation: 105

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

Upvotes: 1

Related Questions