Best way to show a loading spinner/gif while my React component is fetching via AJAX?

Question

Imagine I have a very simple React component that shows a list of elements that are stored in this.state.myList (see example below)

Hitting a \"Refresh\" bu

Answer 1

The React model is built around having UI as a representation of your state. That means you should model your state as "what is the necessary data" and the return value of render() is just how you display that data.

In your case, you should keep track of isLoading and in render() you conditionally display the spinner based on the value in your state.

var Foo = React.createClass({
  getInitialState: function() {
    return {isLoading: false};
  },
  handleButtonClick: function() {
    this.setState({ isLoading: true });
    return $.ajax({
      type: "POST",
      url: "/some/refresh/url",
      data: JSON.stringify({}),
      dataType: "json",
      contentType: "application/json",
      success: (function(response){
        self.setState({ myList: response.list, isLoading: false });
      })
    });
  },

  render: function() {
    return (
      

        

          {
            this.state.myList.map(function(item) {
              return 
{item.name}
            });
          }
        

        {this.state.isLoading && }

        
      
    );
  }
});