React – Affiche l’écran de chargement pendant que le rendu DOM est?

Ceci est un exemple de la page de l’application Google Adsense. L’écran de chargement affiché avant la page principale s’affiche après.

entrer la description de l'image ici

Je ne sais pas comment faire la même chose avec React parce que si je rend le rendu de l’écran par le composant React, il ne s’affiche pas pendant le chargement de la page car il doit attendre le rendu de DOM auparavant.

Mis à jour :

J’ai fait un exemple de mon approche en plaçant un chargeur d’écran dans index.html et en le supprimant dans la méthode de cycle de vie React componentDidMount() .

Exemple: https://nguyenbathanh.github.io

Source: https://github.com/nguyenbathanh/react-loading-screen

Cela peut être fait en plaçant l’icône de chargement dans votre fichier html (index.html pour ex), afin que les utilisateurs voient l’icône immédiatement après le chargement du fichier HTML.

Une fois le chargement de votre application terminé, vous pouvez simplement supprimer cette icône de chargement dans un crochet de cycle de vie, ce que je fais généralement dans componentDidMount .

Puisque vous faites des réactions dans un conteneur DOM –

, vous pouvez append un spinner à ce conteneur, et lorsque la réaction sera chargée et rendue, le spinner disparaîtra.

Le problème:

React remplacera le contenu du conteneur dès que ReactDOM.render() est appelé. Même si vous restituez null , le contenu sera toujours remplacé par un commentaire – . Cela signifie que si vous souhaitez afficher le chargeur alors que réagit rend, une

chargement placée dans le conteneur (

par exemple) pas de travail.

Solution:

Ma solution consiste à append la classe du chargeur directement au conteneur, mais avec la pseudo-classe :empty . Le spinner sera visible, tant que rien n’est rendu dans le conteneur (les commentaires ne comptent pas). Dès que la réaction rend un élément, le chargeur disparaîtra.


Dans l’exemple, vous pouvez voir un composant qui rend null jusqu’à ce qu’il soit prêt. Le conteneur est également le chargeur –

, et la classe du chargeur ne fonctionnera que s’il est :empty (voir les commentaires dans le code):

 class App extends React.Component { state = { loading: true }; componentDidMount() { setTimeout(() => this.setState({ loading: false }), 1500); // simulates an async action, and hides the spinner } 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 ( 
I'm the app
); } } ReactDOM.render( , 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); } } 
   

La solution à ce problème est la suivante:

Dans votre fonction de rendu, faites quelque chose comme ceci:

 constructor() { this.state = { isLoading: true } } componentDidMount() { this.setState({isLoading: false}) } render() { return( this.state.isLoading ? *showLoadingScreen* : *yourPage()* ) } 

Initialiser isLoading comme true dans le constructeur et false sur componentDidMount

Si quelqu’un recherche une bibliothèque de repository, de configuration et de dépendance zéro pour les cas d’utilisation ci-dessus, essayez pace.js ( http://github.hubspot.com/pace/docs/welcome/ ).

Il se connecte automatiquement aux événements (ajax, readyState, pushstate d’historique, boucle d’événement js, etc.) et affiche un chargeur personnalisable.

A bien fonctionné avec nos projets de réaction / relais (gère les modifications de navigation en utilisant react-router, les demandes de relais )

Lorsque votre application React est massive, il faut vraiment du temps pour qu’elle soit opérationnelle après le chargement de la page. Disons que vous montez votre partie React de l’application sur #app . Habituellement, cet élément dans votre index.html est simplement un div vide:

 

Ce que vous pouvez faire à la place, c’est de mettre un peu de style et un tas d’images pour qu’il soit plus beau entre le chargement de la page et le rendu initial de l’application Rea sur DOM:

 
Hold on, it's loading!

Après le chargement de la page, l’utilisateur verra immédiatement le contenu original de index.html. Peu de temps après, lorsque React est prêt à monter toute la hiérarchie des composants rendus sur ce noeud DOM, l’utilisateur verra l’application réelle.

Notez la class , pas className . C’est parce que vous devez le mettre dans votre fichier HTML.


Si vous utilisez SSR, les choses sont moins compliquées car l’utilisateur verra l’application réelle juste après le chargement de la page.

J’ai dû faire face à ce problème récemment et j’ai trouvé une solution qui me convient parfaitement. Cependant, j’ai essayé la solution @Ori Drori ci-dessus et, malheureusement, cela n’a pas fonctionné (avec quelques retards + je n’aime pas l’utilisation de la fonction setTimeout ).

C’est ce que j’ai imaginé:

fichier index.html

Tag interne – styles pour l’indicateur:

  

Maintenant, la balise body :

 

Et puis vient une logique très simple, dans le fichier app.js (dans la fonction de rendu):

 const spinner = document.getElementById('spinner'); if (spinner && !spinner.hasAtsortingbute('hidden')) { spinner.setAtsortingbute('hidden', 'true'); } 

Comment ça marche?

Lorsque le premier composant (dans mon application c’est app.js dans la plupart des cas) se monte correctement, le spinner est masqué en lui appliquant hidden atsortingbut hidden .

Ce qui est plus important d’append – la condition !spinner.hasAtsortingbute('hidden') empêche d’append hidden atsortingbut hidden au spinner avec chaque assembly de composant. En fait, il ne sera ajouté qu’une seule fois, lorsque l’application est chargée.

J’utilise le package réact -progress-2 npm, qui est dépendant de zéro et fonctionne très bien dans ReactJS.

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

Installation:

npm install react-progress-2

Inclure react-progress-2 / main.css dans votre projet.

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

Incluez react-progress-2 et placez-le quelque part dans le composant supérieur, par exemple:

 import React from "react"; import Progress from "react-progress-2"; var Layout = React.createClass({ render: function() { return ( 
{/* other components go here*/}
); } });

Maintenant, chaque fois que vous devez afficher un indicateur, appelez simplement Progress.show() , par exemple:

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

Veuillez noter que les appels show et hide sont empilés, donc après des appels de show n-consécutifs, vous devez masquer les appels pour masquer un indicateur ou utiliser Progress.hideAll() .

Définir le délai d’attente dans componentDidMount fonctionne mais dans mon application, j’ai reçu un avertissement de fuite de mémoire. Essayez quelque chose comme ça.

 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; } }