Mostrar una pantalla de carga o de inicio durante el tiempo de respuesta del servidor es una excelente manera de interactuar con el usuario. Pero hacer una pantalla de inicio/carga se vuelve difícil cuando queremos usar prácticamente un cargador animado, donde necesitamos hacer un esfuerzo adicional para escribir su archivo de estilo. Para superar este problema, usamos un montón de cargadores predefinidos del módulo de reacción-spinners .
Creación de la aplicación React e instalación del módulo:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:
cd foldername
-
Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:
npm i react-spinners
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Acercarse:
- Paso 1: Escribiremos nuestro código en App.js, no es necesario crear ningún otro componente para este proyecto. Para usar los spinners predefinidos, necesitamos importar el componente ‘ loader ‘ de ‘ react-spinners ‘.
- Paso 2: También necesitamos useState para agregar un estado a nuestro componente funcional y también se necesita useEffect .
lo que necesitamos para importar
- Paso 3: Agregue un estado isLoading que indicará si nuestra página se está cargando o no.
- Paso 4: agregue un setTimeout() dentro de useEffect para que la pantalla de inicio aparezca durante un cierto período de tiempo.
- Paso 5: Por último, podemos usar un bloque CSS personalizado para anular su propiedad y usarlo cuando isLoading es verdadero, es decir, la página aún se está cargando.
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React, { useState, useEffect } from 'react';
// Importing loader
import PacmanLoader from "react-spinners/PacmanLoader";
import ClockLoader from "react-spinners/ClockLoader";
import './App.css';
const App = () => {
// Loading state
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Wait for 3 seconds
setTimeout(() => {
setIsLoading(false);
}, 3000);
}, []);
// Custom css for loader
const override = `
display: block;
margin: 0 auto;
border-color: red;
`;
return isLoading ?
// If page is still loading then splash screen
<PacmanLoader color={'#36D7B7'} isLoading={isLoading}
css={override} size={150} /> :
<h1 className="App">
This is Main Page
{<ClockLoader color={'#36D7B7'} isLoading={isLoading}
css={override} size={150} />}
</h1>
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Referencia: