Soy realmente nuevo en ReactJs, JS y básicamente todo el desarrollo web. Intenté crear un sitio web de cartera de una sola página usando ReactJS y quería probar algunas técnicas más avanzadas, como el uso de ganchos. Quería crear un efecto simple en el que una animación se reproduce una vez (cuando un usuario inicia sesión por primera vez en mi sitio web), luego se lo lleva al sitio principal. Todos los recursos que he encontrado en línea se relacionan con la carga de pantallas mientras obtengo datos de una API. Aquí está mi código para la pantalla de carga:
import Typical from 'react-typical'; import "./Loading.scss"; import {useState, useEffect} from 'react'; const Loading = function Loading() { const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true) setTimeout(() => { setLoading(false) },18000); }, []) return ( <div> <h1 id="loading"> { loading ? <Typical oop={1} wrapper = 'p' steps={[ "Hello", 2000, "My name is Leonard.", 3000, "I am an aspiring developer", 3000, "Welcome to my website!", 3000, ]} /> : null} </h1> </div> ); }Estoy usando un paquete de reacción muy simple llamado típico que brinda una buena animación de palabras que se escriben en la pantalla como una máquina de escribir, luego se eliminan, luego se muestra el siguiente fragmento de texto, etc. Esto solo se repite una vez. He usado los ganchos useState y useEffect con un temporizador para establecer la carga en falso en 18 segundos, que es cuando la animación se detiene. Como puede ver, renderizo la animación solo si la carga es verdadera, usando un operador ternario, luego, una vez que la carga se establece en falso, se muestra nulo. Mi app.js se ve así:
import Nav from './Components/Nav'; import "./App.scss"; import Loading from './Components/Loading'; function App() { return ( <div> <Loading /> <main> <Nav/> </main> </div> ); } export default App;(Disculpas por el horrible JSX). El problema que tengo es que tanto la barra de navegación como la pantalla de carga se cargan al mismo tiempo. No estoy seguro de cómo ocultar todos mis otros componentes hasta que finalice la animación. Todo lo que intento es demasiado complicado y realmente no parece muy eficiente en absoluto. Agradezco cualquier ayuda gracias!
La razón por la que ambos se muestran al mismo tiempo es en app.js Tiene tanto el componente <Loading /> como el componente <Nav /> representados al mismo tiempo.
Hay dos soluciones que puede elegir
Puede diseñar el componente de carga para que ocupe la pantalla completa y cubra todo. Esto se puede hacer dando una identificación a la pantalla de carga. Diga, loading-screen por ejemplo, y haga lo siguiente en css:
#loading-screen { position: absolute; width: 100%; height: 100%; background-color: white; display: flex; justify-content: center; align-items: center; }PERO asegúrese de ocultar la pantalla de carga después de que pase el tiempo de carga; de lo contrario, seguirá bloqueando la vista.
Puede poner la lógica de carga en app.js en lugar de estar dentro del componente de carga. Puede hacer que represente los componentes de carga siempre que el estado de carga sea verdadero; de lo contrario, cargue el resto de la aplicación (la barra de navegación, etc.). Puedes hacer algo como:
function App() { const [loading, setLoading] = useState(true); useEffect(() => { setTimeout(() => { setLoading(false) }, 18000); }, []); return ( <div> {loading ? (<Loading />) : ( <main> <Nav /> </main> ) } </div> ); }