Cómo crear una animación de carga en React con React-spinners

Reeditado por Platón

seguidores: 0

Introducción

Cuando se crean aplicaciones React que obtienen contenido de fuentes externas que tardan algún tiempo en cargarse, siempre es una buena idea brindar una experiencia de usuario agradable atrayendo a los usuarios y manteniendo su atención con un cargador, ya que esto ayuda a los usuarios a comprender lo que está sucediendo en lugar de hacerlo. que dejarlos especular.

En esta guía, aprenderemos cómo mostrar la animación del cargador al cargar una aplicación y recuperar contenido de fuentes externas, utilizando el react-spinners biblioteca.

Con ese fin, crearemos una pequeña aplicación que obtenga cotizaciones, con una pantalla de carga mientras se obtiene una cotización:

Si desea obtener más información sobre cómo crear hilanderos desde cero, lea nuestro “Cómo crear una animación de carga en React from Scratch”!

Creación de una aplicación React de muestra

Comencemos mirando nuestro marcado de React. Básicamente, tenemos dos <div> elementos en el con el futuro bebé <div> (en aras de la simplicidad) – uno es el loader-container y el segundo es el main-content:

import React from 'react'; const App = () => { return ( <div className="container"> <div className="loader-container"> <div className="spinner"></div> </div> <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote"> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> - <span className="author">Rollo May</span> </div> </div> </div> );
}; export default App;

Hasta ahora, solo hemos creado un <div> para nuestro cargador. Ahora, veamos cómo podemos agregarlo y activarlo cuando se carga algún contenido.

Nota: Usted puede comprobar fuera este repositorio y verifique el código si es necesario mientras lee esta guía.

Usando React Spinners en nuestra aplicación

react-spinner es una colección de muchos spinners que podemos usar en nuestras aplicaciones React. Para usar React spinner, primero debemos instalar la biblioteca en el directorio de nuestro proyecto ejecutando cualquiera de los siguientes comandos:

$ npm install --save react-spinners
// Or
$ yarn add react-spinners

Una vez hecho esto, ahora podemos importar el cargador particular que queremos usar (en este caso, un ClipLoader) y establezca algunos estilos como el tamaño y el color:

import React, { useState, useEffect } from 'react';
import ClipLoader from 'react-spinners/ClipLoader'; const App = () => { const [loadingInProgress, setLoading] = useState(false); <!-- ... --> return ( <div className="container"> {loadingInProgress ? ( <div className="loader-container"> <ClipLoader color={'#fff'} size={150} /> </div> ) : ( <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote" onClick={getRandomQuote}> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote">{quote.content}</blockquote>-{' '} <span className="author">{quote.author}</span> </div> </div> )} </div> );
}; export default App;

El react-spinner La biblioteca tiene muchas características útiles, por ejemplo, podemos usarla para manejar la carga sin usar operadores ternarios:

<ClipLoader color={'#fff'} loading={loadingInProgress} size={150} />

En lugar de utilizar un operador ternario para mostrar el contenido en función del valor del loadingInProgress variable, simplemente hemos usado loading={loadingInProgress} preferiblemente.

También podemos modificar el CSS utilizado para controlar el spinner-icon mediante el uso de un override atributo:

import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader"; const override = css` display: block; margin: 0 auto; border-color: red;
`; function App() { let [loadingInProgress, setLoading] = useState(true); return ( <div className="container"> <ClipLoader color={'#fff'} loading={loadingInProgress} css={override} size={150} /> // ... </div> );
} export default App;