How to show loader in reactjs and meteor?

Question

I have a page where 3 recipes are listed along with more button. When more button is clicked more 3 recipes are listed. What i am trying to do is before listing more 3 recipes i want to show a spinner/loader icon but i could only change the text of button. How can i show loader icon as soon as more button is clicked and before those additional 3 recipes are listed. I am using meteorjs and reactjs.

my code for this is

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

You could remove the loading state, and just compute the loading state from the data: {this.state.limit !== this.data.recipes.length && <img src="path_to_loader.gif" />}

I am not sure where you want to show the loader, but for example you could do:

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>
  );
}