title: Best way to show a loading spinner/gif while my React component is fetching via AJAX?
body: <p>Imagine I have a very simple React component that shows a list of elements that are stored in <code>this.state.myList</code> (see example below)</p>
  
  <p>Hitting a "Refresh" button at the bottom causes React to query the backend server and retrieve an updated list that it will then display. The actual contents or implementation of this list are irrelevant.</p>
  
  <pre><code>var Foo = React.createClass({
    handleButtonClick: function() {
      return $.ajax({
        type: "POST",
        url: "/some/refresh/url",
        data: JSON.stringify({}),
        dataType: "json",
        contentType: "application/json",
        success: (function(response){
          self.setState({ myList: response.list });
        })
      });
    },
  
    render: function() {
      return (
        &lt;div className="container"&gt;
          &lt;ul&gt;
            {
              this.state.myList.map(function(item) {
                return &lt;li id="{item.id}"&gt;{item.name}&lt;/li&gt;
              });
            }
          &lt;/ul&gt;
  
          &lt;input type="submit" value="REFRESH LIST" onClick={this.handleButtonClick} /&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>Let's say the AJAX call (for whatever reason) takes a few seconds. In that meantime, I'd love to show a standard "loading" or "spinner" gif to let the user know it's working. </p>
  
  <p>What's the best approach to doing that here? </p>
  
  <ul>
  <li><p>Right before the AJAX call I could manually update the DOM and insert a spinner gif but that doesn't seem like the "React way to do it". And plus I don't know what impact that would have on the ReactDOM that react maintains. </p></li>
  <li><p>I could track a state for <code>isLoading</code> and show the spinner instead of the list if it is loading. But then I would need it to <code>render()</code> something and then immediately kick off another call to an AJAX action. </p></li>
  </ul>
  
  <p>Any help appreciated.</p>
  
  <p>Thanks!</p>