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

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

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

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

Answer 2

При вызове 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);
}

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