import JoinComponent from '@/components/join/JoinComponent' import Footer from '@/components/Layouts/Footer' import Navbar from '@/components/Layouts/Navbar' import Loader from '@/components/Loader' import { useAuth } from '@/hooks/auth' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' const Join = () => { const [loading, setLoading] = useState(true) const { user } = useAuth({ middleware: 'guest', redirectIfAuthenticated: '/', }) useEffect(() => { console.log(user) if (user) { setLoading(true) } let t if (user === undefined) { t = setInterval(() => { setLoading(false) }, 2000) } return () => { clearInterval(t) } }, [user]) return ( <div> <title>Join</title> <Navbar /> {loading ? <Loader /> : <JoinComponent />} <Footer />{' '} </div> ) } export default Join

Aunque mi código ha cambiado significativamente con el tiempo, he resuelto el problema de esta manera.

Lo que es importante tener en cuenta es que durante un cierto tiempo, el enlace useAuth no devuelve una instancia de usuario y en ese período el usuario permanece indefinido.

Más tarde, si el usuario ya está autenticado, se devuelve un objeto de usuario; de lo contrario, el usuario permanece sin definir.

En este caso, es difícil saber de inmediato si el objeto de usuario se definirá, por lo tanto, debemos esperar un tiempo antes de establecer el estado de carga en falso.

De esta manera, se puede evitar un destello repentino del componente no deseado y, en su lugar, se puede generar un cargador. Sin embargo, el problema puede surgir en el futuro si el enlace useAuth tarda más tiempo en devolver un objeto de usuario que el tiempo codificado, lo que requiere otro enfoque para este problema.