Reagisci - Visualizza la schermata di caricamento durante il rendering di DOM?

Questo è un esempio dalla pagina dell'applicazione Google Adsense. Viene visualizzata la schermata di caricamento visualizzata prima della pagina principale.

Non so come fare la stessa cosa con React perché se creo la schermata di caricamento renderizzata dal componente React, non viene visualizzata durante il caricamento della pagina perché deve attendere il rendering del DOM prima.

aggiornato :

Ho fatto un esempio del mio approccio inserendo il caricatore dello schermo index.htmle rimuovendolo nel componentDidMount()metodo del ciclo di vita di React .

Esempio e schermata di caricamento delle reazioni .

Questo potrebbe essere fatto posizionando l'icona di caricamento nel tuo file html (index.html per ex), in modo che gli utenti possano vedere l'icona immediatamente dopo il caricamento del file html.

Al termine del caricamento della tua app, puoi semplicemente rimuovere l'icona di caricamento in un hook del ciclo di vita, di solito lo faccio in componentDidMount.

L'obiettivo. il gol

Quando viene visualizzata la pagina html, visualizza immediatamente uno spinner (mentre React si carica) e nascondilo dopo che React è pronto.

Poiché lo spinner è reso in puro HTML / CSS (al di fuori del dominio React), React non dovrebbe controllare direttamente il processo di mostrare / nascondere e l'implementazione dovrebbe essere trasparente a React.

Soluzione 1: la pseudo-classe vuota

Poiché si esegue il rendering di un reagente in un contenitore DOM <div id="app"></div>, è possibile aggiungere uno spinner a quel contenitore e quando si carica e si esegue il rendering, lo spinner scompare.

Non è possibile aggiungere un elemento DOM (ad esempio un div) all'interno della radice di reazione, poiché React sostituirà il contenuto del contenitore non appena ReactDOM.render()viene chiamato. Anche se esegui nullil rendering , il contenuto verrebbe comunque sostituito da un commento - <!-- react-empty: 1 --> . Ciò significa che se si desidera visualizzare il caricatore durante il montaggio del componente principale, i dati vengono caricati, ma non viene effettivamente visualizzato nulla, un markup del caricatore posizionato all'interno del contenitore (<div id="app"><div class="loader"></div></div> ad esempio) non funzionerebbe.

Una soluzione alternativa consiste nell'aggiungere la classe Spinner al contenitore di reazione e utilizzare la :emptyclasse pseudo . Il filatore sarà visibile, purché non venga visualizzato nulla nel contenitore (i commenti non contano). Non appena reagirà con qualcosa di diverso dal commento, il caricatore scomparirà.

Esempio 1

Nell'esempio puoi vedere un componente che esegue il rendering nullfino a quando non è pronto. Anche il contenitore è il caricatore - <div id="app" class="app"></div>e la classe del caricatore funzionerà solo se è :empty(vedi commenti nel codice):

class App extends React.Component {
  state = {
    loading: true
  };

  componentDidMount() {
    // this simulates an async action, after which the component will render the content
    demoAsyncCall().then(() => this.setState({ loading: false }));
  }
  
  render() {
    const { loading } = this.state;
    
    if(loading) { // if your component doesn't have to wait for an async action, remove this block 
      return null; // render null when app is not ready
    }
    
    return (
      <div>I'm the app</div>
    ); 
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

.loader:empty {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app" class="loader"></div> <!-- add class loader to container -->

Esempio 2

Una variazione sull'uso della :emptypseudo classe per mostrare / nascondere un selettore, è impostare lo spinner come elemento di pari livello nel contenitore dell'app e mostrarlo finché il contenitore è vuoto utilizzando il combinatore di fratelli adiacente ( +):

class App extends React.Component {
  state = {
    loading: true
  };

  componentDidMount() {
    // this simulates an async action, after which the component will render the content
    demoAsyncCall().then(() => this.setState({ loading: false }));
  }
  
  render() {
    const { loading } = this.state;
    
    if(loading) { // if your component doesn't have to wait for async data, remove this block 
      return null; // render null when app is not ready
    }
    
    return (
      <div>I'm the app</div>
    ); 
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

#app:not(:empty) + .sk-cube-grid {
  display: none;
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  animation-delay: 0.2s;
}

@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    transform: scale3D(1, 1, 1);
  }
  35% {
    transform: scale3D(0, 0, 1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app"></div>
<!-- add class loader to container -->

<div class="sk-cube-grid">
  <div class="sk-cube sk-cube1"></div>
  <div class="sk-cube sk-cube2"></div>
  <div class="sk-cube sk-cube3"></div>
  <div class="sk-cube sk-cube4"></div>
  <div class="sk-cube sk-cube5"></div>
  <div class="sk-cube sk-cube6"></div>
  <div class="sk-cube sk-cube7"></div>
  <div class="sk-cube sk-cube8"></div>
  <div class="sk-cube sk-cube9"></div>
</div>

Soluzione 2 - Passa i "gestori" dello spinner come oggetti di scena

Per avere un controllo più preciso sullo stato di visualizzazione dei filatori, creare due funzioni showSpinnerehideSpinner , e passarli al contenitore principale via puntelli. Le funzioni possono manipolare il DOM o fare tutto il necessario per controllare lo spinner. In questo modo, React non è a conoscenza del "mondo esterno", né ha bisogno di controllare direttamente il DOM. È possibile sostituire facilmente le funzioni per il test o se è necessario modificare la logica e passarle ad altri componenti nella struttura React.

Esempio 1

const loader = document.querySelector('.loader');

// if you want to show the loader when React loads data again
const showLoader = () => loader.classList.remove('loader--hide');

const hideLoader = () => loader.classList.add('loader--hide');

class App extends React.Component {
  componentDidMount() {
    this.props.hideLoader();
  }
  
  render() {   
    return (
      <div>I'm the app</div>
    ); 
  }
}

// the setTimeout simulates the time it takes react to load, and is not part of the solution
setTimeout(() => 
  // the show/hide functions are passed as props
  ReactDOM.render(
    <App
      hideLoader={hideLoader}
      showLoader={showLoader} 
      />,
    document.getElementById('app')
  )
, 1000);

.loader {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
  transition: opacity 0.3s;
}

.loader--hide {
  opacity: 0;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app"></div>

<div class="loader"></div>

Esempio 2: ganci

In questo esempio viene utilizzato l' useEffecthook per nascondere lo spinner dopo il montaggio del componente.

const { useEffect } = React;

const loader = document.querySelector('.loader');

// if you want to show the loader when React loads data again
const showLoader = () => loader.classList.remove('loader--hide');

const hideLoader = () => loader.classList.add('loader--hide');

const App = ({ hideLoader }) => {
  useEffect(hideLoader, []);
  
  return (
    <div>I'm the app</div>
  ); 
}

// the setTimeout simulates the time it takes react to load, and is not part of the solution
setTimeout(() => 
  // the show/hide functions are passed as props
  ReactDOM.render(
    <App
      hideLoader={hideLoader}
      showLoader={showLoader} 
      />,
    document.getElementById('app')
  )
, 1000);

.loader {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
  transition: opacity 0.3s;
}

.loader--hide {
  opacity: 0;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

<div class="loader"></div>

La soluzione alternativa per questo è:

Nella tua funzione di rendering fai qualcosa del genere:

constructor() {
    this.state = { isLoading: true }
}

componentDidMount() {
    this.setState({isLoading: false})
}

render() {
    return(
        this.state.isLoading ? *showLoadingScreen* : *yourPage()*
    )
}

Inizializza isLoading come true nel costruttore e false su componentDidMount

Se qualcuno è alla ricerca di una libreria drop-in, zero-config e zero-dependencies per il caso d'uso sopra riportato, provare pace.js ( http://github.hubspot.com/pace/docs/welcome/ ).

Si aggancia automaticamente agli eventi (ajax, readyState, pushstate cronologico, loop eventi js ecc.) E mostra un caricatore personalizzabile.

Ha funzionato bene con i nostri progetti di reazione / inoltro (gestisce le modifiche alla navigazione utilizzando reagente -router, richieste di inoltro) (Non soddisfatto; aveva usato pace.js per i nostri progetti e ha funzionato benissimo)

Quando la tua app React è enorme, ci vuole davvero del tempo prima che si alzi e funzioni dopo il caricamento della pagina. Supponiamo che tu monti la tua parte di React sull'app #app. Di solito, questo elemento nel tuo index.html è semplicemente un div vuoto:

<div id="app"></div>

Quello che puoi fare invece è mettere un po 'di stile e un mucchio di immagini lì per renderlo migliore tra il caricamento della pagina e il rendering iniziale dell'app React su DOM:

<div id="app">
  <div class="logo">
    <img src="/my/cool/examplelogo.svg" />
  </div>
  <div class="preload-title">
    Hold on, it's loading!
  </div>
</div>

Dopo il caricamento della pagina, l'utente vedrà immediatamente il contenuto originale di index.html. Poco dopo, quando React è pronto a montare l'intera gerarchia dei componenti renderizzati su questo nodo DOM, l'utente vedrà l'app effettiva.

Nota classno className. È perché è necessario inserirlo nel file html.

Se usi SSR, le cose sono meno complicate perché l'utente vedrà effettivamente la vera app subito dopo il caricamento della pagina.

Questo accadrà prima che ReactDOM.render()prenda il controllo della radice <div> . Cioè la tua app non sarà stata montata fino a quel momento.

Quindi puoi aggiungere il tuo caricatore nel tuo index.htmlfile all'interno della radice <div>. E questo sarà visibile sullo schermo fino a quando React prende il sopravvento.

Puoi usare qualunque elemento loader che funzioni meglio per te ( svgad esempio con l'animazione).

Non è necessario rimuoverlo con alcun metodo del ciclo di vita. React sostituirà qualsiasi figlio della sua radice <div> con il tuo rendering <App/>, come possiamo vedere nella GIF qui sotto.

Esempio su CodeSandbox

index.html

<head>
  <style>
    .svgLoader {
      animation: spin 0.5s linear infinite;
      margin: auto;
    }
    .divLoader {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="divLoader">
      <svg class="svgLoader" viewBox="0 0 1024 1024" width="10em" height="10em">
        <path fill="lightblue"
          d="PATH FOR THE LOADER ICON"
        />
      </svg>
    </div>
  </div>
</body>

index.js

Utilizzo debuggerper ispezionare la pagina prima delle ReactDOM.render()esecuzioni.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

debugger; // TO INSPECT THE PAGE BEFORE 1ST RENDER

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Oggi possiamo usare anche gli hook in React 16.8:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [ spinner, setSpinner ] = useState(true);

  // It will be executed before rendering

  useEffect(() => {
    setTimeout(() => setSpinner(false), 1000)
  }, []);

  // [] means like componentDidMount

  return !spinner && <div>Your content</div>;
};

export default App;

L'impostazione del timeout in componentDidMount funziona ma nella mia applicazione ho ricevuto un avviso di perdita di memoria. Prova qualcosa del genere.

constructor(props) {
    super(props)
    this.state = { 
      loading: true,
    }
  }
  componentDidMount() {
    this.timerHandle = setTimeout(() => this.setState({ loading: false }), 3500); 
  }

  componentWillUnmount(){
    if (this.timerHandle) {
      clearTimeout(this.timerHandle);
      this.timerHandle = 0;
    }
  }

Di recente ho dovuto affrontare questo problema e ho trovato una soluzione che funziona bene per me. Tuttavia, ho provato la soluzione @Ori Drori sopra e purtroppo non ha funzionato correttamente (ha avuto alcuni ritardi + Non mi piace l'uso disetTimeout funzione lì).

Questo è quello che mi è venuto in mente:

index.html file

headTag interno - stili per l'indicatore:

<style media="screen" type="text/css">

.loading {
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  background-color: black;
  border-radius: 100%;
  height: 6em;
  width: 6em;
}

.container {
  align-items: center;
  background-color: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
    transform: scale(1.0);
  }
}

</style>

Ora il bodytag:

<div id="spinner" class="container">
  <div class="loading"></div>
</div>

<div id="app"></div>

E poi arriva una logica molto semplice, all'interno del app.jsfile (nella funzione di rendering):

const spinner = document.getElementById('spinner');

if (spinner && !spinner.hasAttribute('hidden')) {
  spinner.setAttribute('hidden', 'true');
}

Come funziona

Quando il primo componente (nella mia app è anche app.jsnella maggior parte dei casi) si monta correttamente, spinnerviene nascosto con l'applicazione hiddendell'attributo ad esso.

Cosa c'è di più importante da aggiungere: la !spinner.hasAttribute('hidden')condizione impedisce di aggiungere l' hiddenattributo allo spinner con ogni componente montato, quindi in realtà verrà aggiunto solo una volta, quando l'intera app viene caricata.

Sto usando un pacchetto npm di reattività -progresso-2 , che è zero-dipendenza e funziona benissimo in ReactJS.

https://github.com/milworm/react-progress-2

Installazione:

npm install react-progress-2

Includi reazioni-progresso-2 / main.css al tuo progetto.

import "node_modules/react-progress-2/main.css";

Includilo react-progress-2e mettilo da qualche parte nel componente principale, ad esempio:

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
render: function() {
    return (
        <div className="layout">
            <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

Ora, ogni volta che devi mostrare un indicatore, chiama Progress.show(), ad esempio:

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

Si noti che showe le hidechiamate sono in pila, quindi dopo n chiamate consecutive consecutive, è necessario fare n nascondere chiamate per nascondere un indicatore o è possibile utilizzare Progress.hideAll().

Sto anche usando React nella mia app. Per le richieste che sto utilizzando gli intercettori axios, un ottimo modo per creare una schermata di caricamento (pagina intera come hai mostrato un esempio) è aggiungere classe o ID ad esempio all'interno degli intercettori (qui codice dalla documentazione ufficiale con un codice personalizzato):

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
     document.body.classList.add('custom-loader');
     return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
       document.body.classList.remove('custom-loader');
       return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  }); 

E quindi implementa in CSS il tuo caricatore con pseudo-elementi (o aggiungi classe o id a un elemento diverso, non il corpo come preferisci): puoi impostare il colore di sfondo su opaco o trasparente, ecc ... Esempio:

custom-loader:before {
    background: #000000;
    content: "";
    position: fixed;
    ...
}

custom-loader:after {
    background: #000000;
    content: "Loading content...";
    position: fixed;
    color: white;
    ...
}

Modifica la posizione del tuo file index.html nella cartella pubblica . Copia l'immagine nella stessa posizione di index.html nella cartella pubblica. Quindi sostituisci la parte del contenuto di index.html contenente i <div id="root"> </div>tag nel codice html indicato di seguito.

<div id="root">  <img src="logo-dark300w.png" alt="Spideren" style="vertical-align: middle; position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Half the height */
   margin-left: -250px; /* Half the width */" />  </div>

Il logo verrà ora visualizzato al centro della pagina durante il processo di caricamento. E verrà quindi sostituito dopo pochi secondi da React.

Non hai bisogno di molto sforzo, ecco un esempio di base.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Title</title>
  <style>
    body {
      margin: 0;
    }

    .loader-container {
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: hidden;
    }

    .loader {
      margin: auto;
      border: 5px dotted #dadada;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div class="loader-container">
      <div class="loader"></div>
    </div>
  </div>
</body>

</html>

Puoi giocare HTMLe CSSfar sembrare il tuo esempio.

La domanda più importante è: cosa intendi per "caricamento"? Se stai parlando dell'elemento fisico da montare, alcune delle prime risposte qui sono fantastiche. Tuttavia, se la prima cosa che fa la tua app è verificare l'autenticazione, ciò che stai davvero caricando sono i dati dal back-end se l'utente ha passato un cookie che li etichetta come utente autorizzato o non autorizzato.

Questo si basa sul redux, ma è possibile modificarlo facilmente in un modello di stato di reazione semplice.

creatore di azioni:

export const getTodos = () => {
  return async dispatch => {
    let res;
    try {
      res = await axios.get('/todos/get');

      dispatch({
        type: AUTH,
        auth: true
      });
      dispatch({
        type: GET_TODOS,
        todos: res.data.todos
      });
    } catch (e) {
    } finally {
      dispatch({
        type: LOADING,
        loading: false
      });
    }
  };
};

La parte infine indica se l'utente è autorizzato o meno, la schermata di caricamento scompare dopo aver ricevuto una risposta.

Ecco come potrebbe essere un componente che lo carica:

class App extends Component {
  renderLayout() {
    const {
      loading,
      auth,
      username,
      error,
      handleSidebarClick,
      handleCloseModal
    } = this.props;
    if (loading) {
      return <Loading />;
    }
    return (
      ...
    );
  }

  ...

  componentDidMount() {
    this.props.getTodos();
  }

...

  render() {
    return this.renderLayout();
 }

}

Se state.loading è vero, vedremo sempre una schermata di caricamento. Su componentDidMount, chiamiamo la nostra funzione getTodos, che è un creatore di azioni che trasforma falsi state.loading quando otteniamo una risposta (che può essere un errore). Il nostro componente si aggiorna, esegue nuovamente il rendering delle chiamate e questa volta non viene visualizzata alcuna schermata di caricamento a causa dell'istruzione if.

L'avvio dell'app React si basa sul download del bundle principale. L'app React si avvia solo dopo il download del bundle principale nel browser. Questo è vero anche in caso di architettura a caricamento lento. Ma il fatto è che non possiamo indicare esattamente il nome di nessun pacchetto. Perché webpack aggiungerà un valore di hash alla fine di ogni bundle nel momento in cui si esegue il comando 'npm run build'. Ovviamente possiamo evitarlo modificando le impostazioni dell'hash, ma ciò influirà seriamente sul problema dei dati della cache nel browser. I browser potrebbero non prendere la nuova versione a causa dello stesso nome di pacchetto. . abbiamo bisogno di un approccio webpack + js + CSS per gestire questa situazione.

cambia public / index.html come di seguito

<!DOCTYPE html>
<html lang="en" xml:lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <style>
 .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      border: 1.1em solid rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .innerpercentage {
      font-size: 20px;
    }
  </style>
  <script>
    function showPercentage(value) {
      document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%";
    }
    var req = new XMLHttpRequest();
    req.addEventListener("progress", function (event) {
      if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
        showPercentage(percentComplete)
        // ...
      } else {
        document.getElementById('percentage').innerHTML = "Loading..";
      }
    }, false);

    // load responseText into a new script element
    req.addEventListener("load", function (event) {
      var e = event.target;
      var s = document.createElement("script");
      s.innerHTML = e.responseText;
      document.documentElement.appendChild(s);
      document.getElementById('parentDiv').style.display = 'none';

    }, false);

    var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>";
    req.open("GET", bundleName);
    req.send();

  </script>
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

  <title>App Name</title>
  <link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet">
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="parentDiv" class="percentage">
    <div id="percentage" class="innerpercentage">loading</div>
  </div>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

Nella configurazione del tuo webpack di produzione modifica l'opzione HtmlWebpackPlugin in basso

 new HtmlWebpackPlugin({
          inject: false,
...

Potrebbe essere necessario utilizzare il comando 'eject' per ottenere il file di configurazione. l'ultimo webpack potrebbe avere la possibilità di configurare HtmlWebpackPlugin senza espellere il progetto.

Ho anche usato la risposta di @Ori Drori e sono riuscito a farlo funzionare. Man mano che il tuo codice React cresce, così verranno compilati i bundle che il browser client dovrà scaricare al primo accesso. Questo impone un problema con l'esperienza dell'utente se non lo gestisci bene.

Quello che ho aggiunto alla risposta di @Ori è stato quello di aggiungere ed eseguire la funzione onload nell'attributo index.html on onload del body tag, in modo che il caricatore scompaia dopo che tutto è stato caricato completamente nella navigazione, vedere lo snippet di seguito:

<html>
  <head>
     <style>
       .loader:empty {
          position: absolute;
          top: calc(50% - 4em);
          left: calc(50% - 4em);
          width: 6em;
          height: 6em;
          border: 1.1em solid rgba(0, 0, 0, 0.2);
          border-left: 1.1em solid #000000;
          border-radius: 50%;
          animation: load8 1.1s infinite linear;
        }
        @keyframes load8 {
          0% {
           transform: rotate(0deg);
          }
          100% {
           transform: rotate(360deg);
          }
        }
     </style>
     <script>
       function onLoad() {
         var loader = document.getElementById("cpay_loader");loader.className = "";}
     </script>
   </head>
   <body onload="onLoad();">
     more html here.....
   </body>
</html>

Che dire dell'uso di Pace

Usa questo indirizzo di collegamento qui.

https://github.hubspot.com/pace/docs/welcome/

1. Sul loro sito Web selezionare lo stile desiderato e incollare in index.css

2.go to cdnjs Copia il link per Pace Js e aggiungi ai tag dello script in public / index.html

3.Rileva automaticamente i carichi sul web e visualizza l'andatura nella parte superiore del browser.

Puoi anche modificare l'altezza e l'animazione anche nel CSS.