Wie loader in reactjs und meteor anzeigen?

Question

Ich habe eine Seite, wo 3 Rezepte zusammen mit mehr Taste aufgeführt sind. Wenn mehr Knopf gedrückt wird, werden mehr 3 Rezepte aufgelistet. Was ich versuche zu tun, ist vor dem Auflisten von mehr 3 Rezepte ich möchte ein Spinner/Loader-Symbol anzeigen, aber ich konnte nur den Text der Schaltfläche ändern. Wie kann ich Loader-Icon anzeigen, sobald mehr Button angeklickt wird und bevor diese zusätzlichen 3 Rezepte aufgelistet werden. Ich benutze Meteorjs und reactjs.

mein Code dafür ist

export default class Home extends Component { 
    constructor(){ 
     super(); 
     this.state = { limit:3 , loading:false } 
     this.addMore = this.addMore.bind(this); 
    } 
    getMeteorData(){ 
     let data = {}; 
     data.recipes = []; 
     data.recipes = Recipes.find({},{sort:{createdAt:-1}}).fetch(); 
     let recipeHandle = Meteor.subscribe('recipelist',this.state.limit); 
     if(recipeHandle.ready()){ 
      data.recipes = Recipes.find({},{sort:{createdAt:-1},limit:this.state.limit}).fetch(); 
     } 
     return data; 
    } 

    addMore(){ 
     this.setState({ 
         limit:this.state.limit + 3, loading: true },() => { 
         this.setTimeout(()=>{ 
          this.setState({loading:false}); 
         },2000); 
        }); 
    } 
    render() { 
     console.log('this.data.recipes',this.data.recipes); 
     let recipes = _.map(this.data.recipes,(recipe) => { 
      return <RecipeList key={recipe._id} recipe={recipe} loading={this.state.loading} /> 
     }); 
     return (
      <div className="row"> 
       <div className="intro blink z-depth-1"> 
        <div className="row"> 
        <div className="col l7"> 
         <h1 className="heading flow-text blink">Sell your Recipe</h1> 
        </div> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col s12"> 
         {recipes} 
        </div> 
       </div> 
       <button onClick={this.addMore} type="button" className="btn coral more">More</button> 
      </div> 
     ); 
    } 
} 
ReactMixin(Home.prototype, ReactMeteorData); 

Answer 1

Sie den Ladezustand versetze, nur den Ladezustand der Daten berechnen: {this.state.limit !== this.data.recipes.length && <img src="path_to_loader.gif" />}

Ich bin nicht sicher, wo Sie die zeigen wollen loader, aber zum Beispiel könnten Sie folgendes tun:

render() { 
    console.log('this.data.recipes',this.data.recipes); 
    let recipes = _.map(this.data.recipes,(recipe) => { 
     return <RecipeList key={recipe._id} recipe={recipe} loading={this.state.loading} /> 
    }); 
    return (
     <div className="row"> 
      <div className="intro blink z-depth-1"> 
      <div className="row"> 
       <div className="col l7"> 
        <h1 className="heading flow-text blink">Sell your Recipe</h1> 
       </div> 
      </div> 
      </div> 
      <div className="row"> 
       <div className="col s12"> 
        {recipes} 
       </div> 
      </div> 
      {this.state.limit !== this.data.recipes.length && <img src="path_to_loader.gif" />} 
      <button onClick={this.addMore} type="button" className="btn coral more">More</button> 
     </div> 
); 
}