Come creare un'animazione di caricamento in React con React-spinner

Ripubblicato da Platone

Seguaci: 0

Introduzione

Quando si creano applicazioni React che recuperano contenuti da fonti esterne che richiedono del tempo per essere caricati, è sempre una buona idea fornire un'esperienza utente piacevole coinvolgendo gli utenti e mantenendo la loro attenzione con un caricatore, in quanto ciò aiuta gli utenti a capire piuttosto cosa sta succedendo piuttosto che lasciarli speculare.

In questa guida impareremo come visualizzare l'animazione del caricatore durante il caricamento di un'applicazione e il recupero del contenuto da fonti esterne, utilizzando il react-spinners biblioteca.

A tal fine, creeremo una piccola applicazione che recupera le virgolette, con una schermata di caricamento durante il recupero di una citazione:

Se desideri saperne di più sulla creazione di spinner da zero, leggi il nostro "Come creare un'animazione di caricamento in React da zero"!

Creazione di un'app React di esempio

Iniziamo osservando il nostro markup React. Fondamentalmente ne abbiamo due <div> elementi nel genitore <div> (per semplicità) – uno è il loader-container e il secondo è il 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;

Finora, abbiamo creato solo un <div> per il nostro caricatore Ora, vediamo come possiamo aggiungerlo e attivarlo quando vengono caricati alcuni contenuti.

Nota: È possibile controllare questo repository e controlla il codice se necessario durante la lettura di questa guida.

Utilizzo di React Spinner nella nostra applicazione

react-spinner è una raccolta di molti spinner che possiamo utilizzare nelle nostre applicazioni React. Per utilizzare lo spinner React, dobbiamo prima installare la libreria nella directory del nostro progetto eseguendo uno dei seguenti comandi:

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

Una volta fatto, possiamo ora importare il particolare caricatore che vogliamo usare (in questo caso, a ClipLoader) e imposta alcuni stili come taglia e colore:

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;

I react-spinner la libreria ha molte funzioni utili, ad esempio possiamo usarla per gestire il caricamento senza usare operatori ternari:

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

Invece di utilizzare l'operatore ternario per visualizzare il contenuto in base al valore di loadingInProgress variabile, abbiamo semplicemente usato loading={loadingInProgress} anziché.

Possiamo anche alterare il CSS usato per controllare il spinner-icon usando un override attributo:

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;