title: React - show loading message before fetched data is rendered
body: <p>I'm trying to build a react app that communicating with the server to query data from database. I want to display a loading message when the app is fetching data. Here's the code snippet: </p>
  
  <pre><code>class App extends React.Component {
      constructor(props) {
          super(props)
  
          this.clickHandler = this.clickHandler.bind(this); 
  
          this.state = {
              isLoading: false, 
              data: [], 
              content: ''
          }
      }
  
      clickHandler() {
          this.setState({ isLoading: true }); 
          fetch('url_1')
            .then(res =&gt; res.json())
            .then(data =&gt; this.setState({ data: data }, () =&gt; {
              this.getContentByData() // loading message vanished before content is displayed
            }))
            .then(() =&gt; this.setState({ isLoading: false }));
      }
  
      getContentByData() {
          fetch(`url_2?data=${this.state.data}`)
          .then(res =&gt; res.json())
          .then(content =&gt; this.setState({ content: content }))
      }
  
      render() {
          return (
              &lt;div&gt;
                  {this.state.isLoading ? &lt;h1&gt;loading&lt;/h1&gt;: null}
                  &lt;h6&gt;{this.state.content}&lt;/h6&gt;
                  &lt;button type="button" onClick={this.clickHandler}&gt;Click Me!&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'))
  </code></pre>
  
  <p>The loading message disappeared before content is displayed. How can I fix this?</p>