title: React show loading spinner while DOM is rendering
body: <p>I have a list with items that first loads 30 items and if the user clicks on &quot;Load All&quot;, rest of the items are shown:</p>
  <pre><code>+---------------------------------------------------------+
  |                                                         |
  |                           List                          |
  |                                                         |
  |                                                         |
  |                                                         |
  +---------------------------------------------------------+
  |                       Load All Button                   |
  +---------------------------------------------------------+
  </code></pre>
  <p>When the list is big (more than 1K items) the rendering of the &quot;Load All&quot; step takes some time and meanwhile the DOM is stuck and not responsive.</p>
  <p>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 ?</p>
  <p>I have tried separating the two parts (list and button) to two components and wrap them in a parent component that holds a &quot;loading&quot; and then changing the state in the List <code>componentDidUpdate</code> function, but it didn't work</p>
  <h2>jsfiddle</h2>
  <p><a href="http://jsfiddle.net/wh4z60m6/4/" rel="noreferrer">http://jsfiddle.net/wh4z60m6/4/</a></p>