title: Render loading screen while waiting for DOM to render after update
body: <p>I want to render a loading screen while the <code>render()</code> function of my React app is running. <a href="https://stackoverflow.com/questions/40987309/react-display-loading-screen-while-dom-is-rendering?noredirect=1&amp;lq=1">This question</a> solves the problem for the initial loading of the application, however I need to perform updates to the app state and re-render the application afterward based on the new state, which appears to be very costly. However, anything I try causes the app to freeze entirely while the render is running. Is there a way to render a dynamic loading screen while waiting for the DOM to re-render?</p>
  <p>Here is a codesandbox showing my intentions: <a href="https://codesandbox.io/s/elated-lamarr-fhqwe?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/elated-lamarr-fhqwe?file=/src/App.js</a></p>
  <p>In the example, I would like for the &quot;LOADING&quot; div to show (ideally this would be some sort of dynamic &quot;loader&quot; component) while the other divs are being rendered, and then disappear when the render is done.</p>