Заблокированное состояние пользовательского интерфейса/Отображение анимации загрузки в реакторе

Question

Я хочу показать анимацию загрузки, пока выполняю некоторую обработку данных, которые хранятся в состоянии компонентов. Логическая переменная загрузки определяет, отображается ли анимация загрузки или нет. Это работает, когда я выполняю асинхронный запрос ajax. Однако, когда я пытаюсь изменить состояние загрузчика в компонентном методе, он не работает. Я пытался избежать блокировки пользовательского интерфейса с небольшим таймаутом (см. Комментарий в коде), но безрезультатно.

Как показать анимацию загрузки при запуске вычислений и скрыть ее снова?

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

Призывая SetTimeout вы фактически передавая результат от setState к setTimeOut. Сделайте setTimeOut следующим образом:

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

Тогда он будет работать нормально.

Answer 2

Для интенсивного расчета в браузерах вам действительно необходимо рассмотреть возможность использования рабочих. Рабочие работают в фоновом режиме, и они предназначены не блокировать пользовательский интерфейс,

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