Tengo problemas con mi aplicación NextJS. Estoy tratando de mostrar una clase (spinner de carga) en un botón cuando intenta iniciar la sesión de un usuario. Estoy haciendo esto configurando el estado de loading en verdadero antes de llamar a la función de inicio de sesión, y luego configurando el estado en falso después de su hecho (en la función submitForm ), pero parece que no lo está configurando. Cada vez que hago clic en el botón, el estado permanece en false . Cualquier ayuda sería muy apreciada.

 import { useAuth } from '@/hooks/auth' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import ButtonSpinner from '@/styles/buttonspinner.module.css' export default function Home() { const router = useRouter() const { login } = useAuth({ middleware: 'guest', redirectIfAuthenticated: '/dashboard', }) const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [errors, setErrors] = useState([]) const [status, setStatus] = useState(null) const [loading, setLoading] = useState(false) useEffect(() => { if (router.query.reset?.length > 0 && errors.length === 0) { setStatus(atob(router.query.reset)) } else { setStatus(null) } }) const submitForm = async event => { event.preventDefault() setLoading(true) login({ email, password, setErrors, setStatus }) setLoading(false) } return ( <div> <form className="mt-8 space-y-6" onSubmit={submitForm} autoComplete="off"> <button className={"shadow-sm relative w-full " + (loading ? ButtonSpinner['btn-loading'] : "")}> Sign in </button> </form> </div> ) }