React.js - a clean way to differentiate load / empty states in Render

Question

I have my component:

getInitialState() { return { items: [] }; }, componentDidMount() { // make remote call to fetch `items` this.setState({ items: itemsFromServer }) }, render(){ if(!this.state.items.length){ // show empty state } // output items } 

Extremely invented / isolated, but this is a general idea. When you first download this component, you see the HTML "empty state" flash, as the server has not returned any data yet.

Does anyone have a / React Way ™ approach to handle whether there is any actual data or show download status?

Answer 1

I just imagined an empty span element, but you could just as easily show some CSS counter to show its loading.

 if(!this.state.items.length){ return(<div class="spinner-loader">Loading…</div>); } 

http://www.css-spinners.com/

You can also think about what will happen if your answer comes back without any results. I would use (this.state.items === null) to indicate that you are expecting results and an empty / collection array (! This.state.items.length) to indicate that the results were not returned.