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

En esta breve guía, aprenda cómo crear una animación giratoria de carga en la biblioteca React de JavaScript, ¡usando `react-spinners`!

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 la biblioteca react-spinners.

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

react-loading-animation-example

If you'd like to learn more about creating spinners from scratch, read our "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 React. Básicamente, tenemos dos elementos <div> en el parent <div> (en aras de la simplicidad): uno es el loader-container y el segundo es el main-content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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.

{.icon aria-hidden=“true”}

Nota: Puedes revisar este repositorio y cotejar el código si es necesario mientras lees esta guía.

Usando React Spinners en nuestra aplicación

reaccionar-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:

1
2
3
$ 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 establecer algunos estilos como el tamaño y el color:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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;

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

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

En lugar de usar el operador ternario para mostrar el contenido basado en el valor de la variable loadingInProgress, simplemente usamos loading={loadingInProgress} en su lugar.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;

{.icon aria-hidden=“true”}

Nota: Podemos leer más sobre react-spinner en la documentación, donde también podemos ver una lista de pecadores disponibles .

Conclusión

En esta breve guía, hemos echado un vistazo a cómo puede usar react-spinners para agregar una rueda de carga a un elemento en React.