React.js - modo pulito per differenziare carico/stati vuoti in Render

Question

ho la mia componente:

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 
} 

estremamente artificiosa/sandbox, ma questa è l'idea generale. Quando si carica questo componente per la prima volta, viene visualizzato un flash dell'HTML "stato vuoto", in quanto il server non ha ancora restituito alcun dato.

Qualcuno ha avuto un approccio/un modo React ™ di gestire se non ci sono effettivamente dati o mostrare uno stato di caricamento?

Answer 1

Ho appena eseguito il rendering di un elemento di span vuoto ma è possibile eseguire il rendering di uno spinner CSS di qualche tipo per mostrare che si sta caricando.

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

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

Si potrebbe anche prendere in considerazione che cosa succede se la risposta ritorna senza risultati. Vorrei usare (this.state.items === null) per indicare che stai aspettando i risultati e una matrice/collezione vuota (! This.state.items.length) per indicare che non sono stati restituiti risultati.