Blockierter UI-Status/Anzeigen einer Ladeanimation in React

Question

Ich möchte eine Ladeanimation anzeigen, während ich die Daten verarbeitet, die im Komponentenstatus gespeichert sind. Die boolesche Ladevariable steuert, ob die Ladeanimation angezeigt wird oder nicht. Das funktioniert, wenn ich eine asynchrone Ajax-Anfrage mache. Wenn ich versuche, den Status des Ladeprogramms in einer Komponentenmethode zu ändern, funktioniert es jedoch nicht. Ich habe versucht, die Sperrung der Benutzeroberfläche mit einem kleinen Timeout (siehe Kommentar im Code) zu vermeiden, aber ohne Erfolg.

Wie zeige ich beim Starten der Berechnungen die Lade-Animation und verstecke sie danach wieder?

calculateMovements() { 

    // show the loading animation 
    this.setState({ 
     loading: true 
    }); 

    let data = this.state.data; 

    // ...do expensive calculations on data here... 

    // avoid blocking UI 
    setTimeout(function() { 
     // redraw with updated data 
     this.setState({ 
      data, 
      loading: false 
     }); 
    }.bind(this), 10); 

}, 

render() { 
    return (
     <MuiThemeProvider> 
      <div id="wrap"> 
       <Loader 
        visible={this.state.loading} 
       /> 
       // etc. ... 

Answer 1

Während setTimeOut Aufruf Sie vorbei tatsächlich das Ergebnis von setState-setTimeOut. Sie die setTimeOut so ...

calculateMovements() { 
    this.setState({ loading: true}); 
    setTimeout(function() { 
     // ...do expensive calculations on data here... 
     this.setState({ 
      data: data, 
      loading: false 
     }); 
    }.bind(this), 10); 
} 

dann wird es funktionieren.

Answer 2

Für starke Berechnungen in Browsern müssen Sie wirklich die Verwendung von Arbeitern in Betracht ziehen. Die Arbeitnehmer sind im Hintergrund zu arbeiten, und sie bestimmt nicht die Benutzeroberfläche zu blockieren,

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers