Jak vytvořit animaci načítání v Reactu s reakčními spinnery

Úvod

Při vytváření aplikací React, které načítají obsah z externích zdrojů, jejichž načítání trvá nějakou dobu, je vždy dobré poskytnout uživatelům příjemný zážitek tím, že zapojíte uživatele a udržíte jejich pozornost pomocí loaderu, protože to uživatelům pomáhá lépe pochopit, co se děje. než je nechat spekulovat.

Za tímto účelem vytvoříme malou aplikaci, která bude načítat nabídky s načítací obrazovkou při načítání nabídky:

Vytvoření ukázkové aplikace React

Začněme tím, že se podíváme na naše značky React. V zásadě máme dva <div> prvky v nadřazeném prvku <div> (pro jednoduchost) - jedna je loader-container a druhý je 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;

Zatím jsme vytvořili pouze <div> pro náš nakladač. Nyní se podívejme, jak jej můžeme přidat a spustit, když se načte nějaký obsah.

Poznámka: Můžete se podívat na tento repozitář a v případě potřeby zkontrolovat kód při čtení tohoto průvodce.

Použití React Spinnerů v naší aplikaci

react-spinner je sbírka mnoha spinnerů, které můžeme použít v našich aplikacích React. Chcete-li použít React spinner, musíme nejprve nainstalovat knihovnu do adresáře našeho projektu spuštěním některého z následujících příkazů:

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

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Jakmile je to hotovo, můžeme nyní importovat konkrétní zavaděč, který chceme použít (v tomto případě ClipLoader ) a nastavte nějaký styl, jako je velikost a barva:

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;

react-spinner knihovna má spoustu užitečných funkcí, například ji můžeme použít ke zpracování načítání bez použití ternárních operátorů:

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

Místo použití ternárního operátoru k zobrazení obsahu na základě hodnoty loadingInProgress proměnnou, jsme jednoduše použili loading={loadingInProgress} místo toho.

Můžeme také změnit CSS používané k ovládání spinner-icon pomocí override atribut:

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;

Poznámka: Můžeme si přečíst více o react-spinner v dokumentaci , kde také můžeme vidět seznam dostupných hříšníků.

Závěr

V tomto krátkém průvodci jsme se podívali na to, jak můžete použít react-spinners pro přidání nakládacího číselníku k prvku v React.