Como criar uma animação de carregamento em React com React-spinners

Republicado por Platão

seguidores: 0

Introdução

Ao criar aplicativos React que buscam conteúdo de fontes externas que levam algum tempo para carregar, é sempre uma boa ideia fornecer uma experiência agradável ao usuário envolvendo os usuários e mantendo sua atenção com um carregador, pois isso ajuda os usuários a entender o que está acontecendo em vez de do que deixá-los especular.

Neste guia, aprenderemos como exibir a animação do carregador ao carregar um aplicativo e recuperar conteúdo de fontes externas, utilizando o react-spinners biblioteca.

Para isso – vamos construir um pequeno aplicativo que busca cotações, com uma tela de carregamento enquanto uma cotação está sendo buscada:

Se você quiser saber mais sobre como criar spinners do zero, leia nosso “Como criar uma animação de carregamento no React from Scratch”!

Criando um aplicativo React de amostra

Vamos começar examinando nossa marcação React. Basicamente, temos dois <div> elementos no principal <div> (por uma questão de simplicidade) - um é o loader-container e o segundo é o 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;

Até agora, criamos apenas um <div> para o nosso carregador. Agora, vamos ver como podemos adicioná-lo e acioná-lo quando algum conteúdo for carregado.

Observação: Você pode conferir este repositório e verifique o código, se necessário, enquanto lê este guia.

Usando React Spinners em nosso aplicativo

react-spinner é uma coleção de muitos spinners que podemos usar em nossos aplicativos React. Para usar o React spinner, devemos primeiro instalar a biblioteca no diretório do nosso projeto executando qualquer um dos seguintes comandos:

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

Feito isso, podemos importar o carregador específico que queremos usar (neste caso, um ClipLoader) e defina alguns estilos como tamanho e cor:

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;

A react-spinner library tem muitos recursos úteis, por exemplo, podemos usá-lo para lidar com o carregamento sem usar operadores ternários:

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

Em vez de usar o operador ternário para exibir o conteúdo com base no valor do loadingInProgress variável, nós simplesmente usamos loading={loadingInProgress} ao invés.

Também podemos alterar o CSS usado para controlar o spinner-icon usando um 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;