Estoy tratando de mostrar un cargador hasta que la página termine de renderizarse y para eso usé este código:
export default function App() { const [isLoading, setIsLoading] = React.useState(true); const handleLoading = () => { setIsLoading(false); }; useEffect(() => { window.addEventListener('load', handleLoading); return () => window.removeEventListener('load', handleLoading); }, []); return ( <div> {isLoading ? ( <Load /> ) : ( <div className="app"> <Topbar /> <div className="parts"> <Intro /> <About /> <Projects /> <Contact /> </div> </div> )} </div> ); } Esto funciona bien en dispositivos de escritorio excepto en modo incógnito y en dispositivos móviles. Muestra el cargador para siempre y cuando presiono el botón Actualizar dos veces solo aparecerá la página. Probé el sitio en gtmetrix y obtuve este error: Lighthouse Error: The page did not paint any content . ¿Cómo puedo solucionar esto?
useEffect será llamado cuando su estado haya cambiado, ¿verdad?
entonces, ¿cuándo crees que se llamará a tu useEffect?
el componente se crea, el estado de carga se establece en verdadero y todo funciona bien, ¿por qué su componente llamaría a su useEffect cuando el estado ni siquiera cambia?
tengo dos sugerencias:
elimine su detector de eventos 'cargar' y agréguelo a su código de función principal, de esta manera se iniciará el detector de eventos. luego, cuando la página se carga, establecerá su estado en falso, por lo tanto, se llamará a su useEffect y eliminará el detector de eventos.
es usar componentes basados en clases con ganchos de ciclo de vida que están diseñados para lo que está tratando de hacer.
No estoy seguro de que eventListener funcione bien en su caso, pero si yo fuera usted, simplemente establecería IsLoading (falso) en useEffect y si desea que se detenga antes de que se monte el componente, puede hacerlo de esta manera:
export default function App() { const [isLoading, setIsLoading] = React.useState(true); const [mounted,setMounted] = React.useState(false); if(!mounted) setIsLoading(false) useEffect(() => { setMounted(true) }, []); return ( <div> {isLoading ? ( <Load /> ) : ( <div className="app"> <Topbar /> <div className="parts"> <Intro /> <About /> <Projects /> <Contact /> </div> </div> )} </div> );}
espero que haya sido útil ;)