Ladebildschirm anzeigen, bis die Daten gefüllt sind - React & Meteor

Question

Ich versuche eine Tabelle aufzufüllen und möchte nur die Daten anzeigen, wenn alles abgerufen wurde. Ich würde gerne einen einfachen "Loading ..." Text zeigen. Zur Zeit habe ich dies:.

getNames() { 
    return Names.find().fetch(); 
} 

render() { 
    let mapData = this.getNames().map((name) => { 
     return <Name key={name.id} name={name} /> 
    }); 

    if (!mapData) { 
    return (<h1>Loading...</h1>); 
    } 

    return (
     <ul> 
     {mapData} 
     </ul> 
    ); 
} 

Dies ist nur ein einfaches Beispiel, aber ich packe eine Menge von Daten aus Names.find() holen() ... obwohl es scheint, dass einmal MapData beginnt bevölkert zu werden, Die Daten werden teilweise geladen (zeigen möglicherweise die ersten paar Elemente und schließen dann ab).

Ich weiß, dass ich das nicht richtig mache. Ich frage mich nur, wie andere Leute damit umgehen, in React einen Fortschrittsbalken zu zeigen.

Ich dachte über eine Verzögerung nur in ComponentDidMount, aber das scheint keine gute Lösung zu sein.

Jede Hilfe würde sehr geschätzt werden!

Danke! T

Answer 1

Meteor.subscribe nimmt einen Rückruf, der aufgerufen wird, sobald das Abonnement seine Daten geladen hat.

Siehe: http://docs.meteor.com/#/full/meteor_subscribe