React show loading spinner while DOM is rendering

Question

I have a list with items that first loads 30 items and if the user clicks on "Load All", rest of the items are shown:

+---------------------------------------------------------+
|                                                         |
|                           List                          |
|                                                         |
|                                                         |
|                                                         |
+---------------------------------------------------------+
|                       Load All Button                   |
+---------------------------------------------------------+

When the list is big (more than 1K items) the rendering of the "Load All" step takes some time and meanwhile the DOM is stuck and not responsive.

What is the right way to tap into React's lifecycle events so that upon clicking the button it will change to a loading spinner and when the list is fully rendered and ready it will change back ?

I have tried separating the two parts (list and button) to two components and wrap them in a parent component that holds a "loading" and then changing the state in the List componentDidUpdate function, but it didn't work

jsfiddle

http://jsfiddle.net/wh4z60m6/4/

Answer 1

Rendering in React is synchronous, which means nothing else can run alongside it.

You could render your list progressively since the user's screen probably can't display more than a hundred items at a time.

Also, note that rendering thousands of items is much slower in the development build than in the production build of React.

EDIT: Another option would be to first render the loader, then render your list items on the next frame. The loader will be displayed until the list items have finished rendering.

React.createClass({
    getInitialState: function() {
        return {
            loading: false,
            showAll: false,
        };
    },

    _showAll: function() {
        this.setState({ showAll: true, loading: true }, function() {
            // Using setTimeout here ensures that the component will wait until
            // the next frame before trying to render again.
            this.setTimeout(function() {
                this.setState({ loading: false });
            }.bind(this), 1000 / 60);
        });
    },

    render: function() {
        var amount = (this.state.showAll && !this.state.loading) ? 100000 : 3;
        return (
            <div>
                <button onClick={this._showAll}>
                    {this.state.loading ? 'Loading...' : 'Show all'}
                </button>
                {items.slice(0, amount).map(renderItem)}
            </div>
        );
    },
});