React.js - czysty sposób odróżnić załadunku/pustych stanów w Render

Question

Mam komponent:

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 
} 

Niezwykle wymyślony/piaskownicy, ale jest to ogólna idea. Po pierwszym załadowaniu tego komponentu zobaczysz flash kodu HTML "pusty stan", ponieważ serwer nie zwrócił jeszcze żadnych danych.

Czy ktoś ma podejście/React Way ™ do obsługi, czy w rzeczywistości nie ma danych, a nie pokazuje stan załadowania?

Answer 1

Właśnie renderowałem element pustego span, ale można równie dobrze wyrenderować jakiś spinner CSS, aby pokazać, że się ładuje.

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

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

Można również rozważyć, co się stanie, jeśli odpowiedź wraca bez rezultatów. Chciałbym użyć (this.state.items === null), aby wskazać, że czekasz na wyniki i pustą tablicę/kolekcję (! This.state.items.length), aby wskazać, że nie zwrócono żadnych wyników.