Skip to main content
2 de 3
se eliminaron 26 caracteres en el cuerpo
Angel
  • 151
  • 8

Button Loading react-hooks-nextjs

Estoy haciendo un botón de hilandero de carga(loading spinner), cuando oprimo el botón aparece el icono de carga pero no desaparece al tiempo marcado, y sigue con la carga. Aquí les dejo el código:

Componente Loader:

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;

Componente LoadingButton:

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">Cargando pagina</span>}
    {!loading && <span className="twoSpan">Cargar Datos</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;

Angel
  • 151
  • 8