Guía paso a paso para crear 3 tipos diferentes de pantallas de carga en React

Hola a todos,

Estaba encontrando una buena manera de hacer una pantalla de carga/animación para mi pequeña aplicación React, y encontré 3 formas diferentes de hacer buenas pantallas de carga,

Tipo-1 : Usando la biblioteca de carga de reacción .

Tipo-2 : Uso de la biblioteca react-lottie .

Tipo-3 : usando CSS simple.

Si prefiere ver el video tutorial, puede verlo aquí; de lo contrario, solo mire los primeros 2 minutos para tener una idea de lo que vamos a construir aquí... ¡y siga leyendo!😄

Empecemos a Construir...

Crea tu aplicación de reacción con,

 npx create-react-app React-Loading-Screen

A continuación, instale dos bibliotecas que vamos a utilizar.

 npm install react-loading react-lottie

NOTA: Aquí, estoy usando la API jsonplaceholder para obtener datos, para mostrar cómo podemos usar el precargador cuando usamos la API.

Tipo 1

Cree un archivo separado como PreLoader1.js.

Cree un componente funcional y aquí, vamos a usar dos estados,

 const [data, setData] = useState([]); const [done,setDone]=useState( undefined );

estado de datos : para almacenar datos que provienen de la llamada API.

estado hecho : es booleano para decidir el clima para mostrar el precargador o no.

Ahora en el efecto de uso,

 useEffect( () => { setTimeout( () => { fetch( "https://jsonplaceholder.typicode.com/posts" ) .then( ( response ) => response.json()) .then( ( json ) => { console .log(json); setData(json); setDone( true ); }); }, 2000 ); }, []);

Puedes poner tu propia lógica en useEffect!

Ahora en el método useEffect anterior,

Primero usamos el método de búsqueda para obtener datos de API, luego convertimos esos datos en json, luego estableceremos el estado de datos con datos json, y luego estableceremos el estado hecho en verdadero.

NOTA: Aquí he usado la función de tiempo de espera durante 2 segundos para que podamos ver la pantalla de carga durante más tiempo.

Ahora rendericemos nuestro componente.

Línea 22: comprobaremos si

 done

Línea 23: aquí he usado la biblioteca de carga reactiva, donde solo tenemos que establecer el tipo, el color, la altura y el ancho. Puedes encontrar más funcionalidades en aquí

Línea 30: desde aquí he mapeado el estado de los datos dentro de la etiqueta ul que devuelve el título de cada publicación en la etiqueta li. (use console.log() dentro de useEffect para ver qué tipo de datos estamos obteniendo)

Ese es el final de la Parte 1 aquí.

Tipo 2

Cree un nuevo archivo y asígnele el nombre PreLoader2.js

Cree un componente funcional e importe la biblioteca react-Lottie.

 import Lottie from "react-lottie"

En este tipo de pantalla de carga tenemos que descargar archivos de animación desde https://lottiefiles.com/

Para este tutorial estoy usando debajo de dos archivos,

Animación de la Tierra: https://lottiefiles.com/1055-world-locations

Animación de éxito: https://lottiefiles.com/1127-success

Descargue este archivo (Lottie JSON) y guárdelo en el directorio de su proyecto.

Importemos estos archivos json como a continuación,

 import * as location from "../1055-world-locations.json" ; import * as success from "../1127-success.json" ;

Como se menciona aquí en la documentación de la biblioteca react-Lottie, debemos establecer opciones predeterminadas para usar estos archivos de animación en nuestro proyecto, así que primero declare estas opciones como,

 const defaultOptions1 = { loop : true , autoplay : true , animationData : location.default, rendererSettings : { preserveAspectRatio : "xMidYMid slice" , }, }; const defaultOptions2 = { loop : true , autoplay : true , animationData : success.default, rendererSettings : { preserveAspectRatio : "xMidYMid slice" , }, };

defaultOptions1 para el primer archivo mientras que defaultOptions2 para el segundo archivo.

En este tutorial vamos a usar 3 estados:

 const [data, setData] = useState([]); const [loading, setloading] = useState( undefined ); const [completed, setcompleted] = useState( undefined );

estado de datos : para almacenar datos que provienen de la llamada API.

estado de carga: estado booleano para el primer archivo de animación.

estado completado: estado booleano para el segundo archivo de animación cuando se completa la llamada a la API.

 useEffect( () => { setTimeout( () => { fetch( "https://jsonplaceholder.typicode.com/posts" ) .then( ( response ) => response.json()) .then( ( json ) => { console .log(json); setData(json); setloading( true ); setTimeout( () => { setcompleted( true ); }, 1000 ); }); }, 2000 ); }, []);

Puedes poner tu propia lógica en useEffect!

El método UseEffect es casi el mismo que en la parte 1, la única diferencia es que, en lugar del estado terminado, tenemos que establecer el estado completado y cargando en verdadero,
Además, he usado una función de tiempo de espera más durante 1 segundo para ver la segunda animación.

 return ( <> {!completed ? ( <> {!loading ? ( <Lottie options={defaultOptions1} height={200} width={200} /> ) : ( <Lottie options={defaultOptions2} height={100} width={100} /> )} </> ) : ( <> <h1>Your Data</h1> </> )} </> ); }

Como se muestra en el código anterior,

en la devolución, si el estado completado es falso, mostraremos la pantalla de carga; de lo contrario, mostraremos nuestros datos.

En la parte de animación haremos una representación condicional más,

cuando el estado de carga es falso, representaremos la animación de la tierra; de lo contrario, representaremos la animación de éxito.

No olvides configurar

 options={defaultOptions1}

 options={defaultOptions2}

Código completo:

Ahora, según la licencia Creative Commons de https://lottiefiles.com/page/license , los creadores deben atribuirse en su solicitud.

Puede atribuir al creador como se muestra en las líneas 60 a 71.

Ese es el final de la Parte 2.

Tipo-3

En este tipo, no vamos a usar ninguna biblioteca, sino que solo usamos un estilo css simple.

Ahora, la lógica de mostrar el precargador es la misma que en la parte 2, así que aquí no les mostraré todo el proceso.

Crear nuevo archivo PreLoader3.js

Copie todo el código del archivo PreLoader2.js y elimine todo el código relacionado con la biblioteca react-Lottie y mantenga todo como está.

solo cambie la declaración de devolución como se muestra a continuación,

 return ( <> {!completed ? ( <> {!loading ? ( <div className="spinner"> <span>Loading...</span> <div className="half-spinner"></div> </div> ) : ( <div className="completed">&#x2713;</div> )} </> ) : ( <> <h1>Your Data</h1> </> )} </> );

En el código anterior,

div con la clase spinner contiene Loading text y spinner.
mientras que div con el nombre de clase completado contiene el símbolo de éxito (✓).

Ahora hagamos un poco de estilo css.

cree un archivo separado preloader3.css para diseñarlo e impórtelo en el archivo preloader3.js.

Ahora,

La clase .spinner es simplemente caja para spinner.

.spinner span contiene estilos y animaciones para cargar texto.

.half-spinner contiene estilos para spinner.

ahora, para cortar toda esta rueda giratoria como en la línea n. ° 20, solo tiene que configurar el borde superior en transparente.

.completed contiene estilo y animación para el símbolo de éxito (✓).

Este es el Fin del tipo 3.

Puede encontrar el repositorio de código completo desde aquí .

Gracias por leer y apoyar. 😄

Siéntete libre de visitar mi canal de youtube:

@CodeBucks

Publicado anteriormente aquí .