title: Preventing UI flicker when loading async data in React.js
body: <p>I have some data in IndexedDB, which can only be accessed asynchronously. I want to build a React.js UI using that data. The general idea is that I'll have multiple React components that load data from IndexedDB and display some UI based on that data, and the user will be able to switch between which component is currently displayed.</p>
  
  <p>My concern is that I don't know how to elegantly accomplish this without some superfluous UI flickering. I can do my asynchronous data loading in <code>componentDidMount</code> and put the data in <code>this.state</code>, but then <code>render</code> will be called before it's finished, forcing me to either display nothing or display some placeholder data for a tiny fraction of a second while the data from IndexedDB is retrieved.</p>
  
  <p>I'd rather have it not <code>render</code> until after my data from IndexedDB is loaded. I know it won't take long to load, and I'd rather the previous component continue to display while the new data loads, so there is just one flicker (old -> new) rather than two (old -> blank/placeholder -> new). This is more like how a normal web page works. When you click a link from one website to another, your browser doesn't instantly show a blank/placeholder screen while it waits for the server from the linked website to respond.</p>
  
  <p>I'm thinking I could do my data loading outside of the React component before calling <code>React.render</code> and then passing it in via <code>this.props</code>. But that seems messy, because nesting components would become tricky and some of my components will be updating over time and pulling new data from IndexedDB, through the exact same code that initializes them. So it seems like an ideal use case for storing data in <code>this.state</code> because then I could update it within the component itself when I get a signal that new data is available. Initialization and updating would be as easy as calling a <code>this.loadData()</code> function that sets some values in <code>this.state</code>... but then I have the aforementioned extra flicker.</p>
  
  <p>Does anyone have any better ideas? What's the canonical solution to this problem? Is it really to just have millisecond blank/placeholder flickers all over the place?</p>