Show infinite scrolling with loader
<p>I am learning reactjs by creating a movie listing app. I have created a movie list using reactjs, react-mdl. I could not use infinite scrolling feature. For example at first, 3 movies are shown on the list and when user scrolls down more 3 movies list should be shown but before showing further 3 movies in list a loader icon should be shown. How can i show such on this scenario of code? I know i have to define the state isLoading and isLoadingMore. If the state of isLoading is false loader should be hidden else a loader should be shown. </p>

<p><strong>App.js</strong></p>

<pre><code>class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      movie:[
          {
            title:'The Flash',
            id:1,
            imageUrl:'http://cdn3-www.superherohype.com/assets/uploads/gallery/the-flash-2x15/12771634_1000420230050280_1499915054664837033_o.jpg',
            rottenTomatoes:'85%'
          },

          {
            title:'Silicon Valley',
            id:2,
            imageUrl:'https://www.wired.com/wp-content/uploads/2016/03/silicon_valley_opener4.jpg',
            rottenTomatoes:'90%'
          },

          {
            title:'Scorpion',
            id:3,
            imageUrl:'http://cdn-uploads.gameblog.fr/images/blogs/36115/202746.jpg',
            rottenTomatoes:'80%'
          },

      ],
      isLoading:true,
      isLoadingMore:false
    }
  }

  showLoaderIcon(){
    this.setState({
      isLoading:true
    });
  }

  hideLoaderIcon(){
    this.setState({
      isLoading:false
    });
  }

  render() {
    return (
      &lt;div className="App"&gt;
        &lt;div className="demo-big-content"&gt;
            &lt;Layout fixedHeader&gt;
                &lt;Header&gt;
                    &lt;HeaderRow title="Find TV Shows"&gt;
                    &lt;/HeaderRow&gt;
                    &lt;HeaderRow&gt;
                      &lt;div className="search"&gt;
                        &lt;span className="material-icons search-icon"&gt;search&lt;/span&gt;
                        &lt;input type="text" className="form-control" placeholder="Name of show(e.g Friends)" /&gt;
                      &lt;/div&gt;
                    &lt;/HeaderRow&gt;
                &lt;/Header&gt;
                &lt;Drawer title="Title"&gt;
                &lt;/Drawer&gt;
                &lt;Content&gt;
                    &lt;div className="page-content" /&gt;
                    &lt;MovieList movies={this.state.movie} /&gt;
                &lt;/Content&gt;
            &lt;/Layout&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}

export default App; 
</code></pre>

<p><strong>MovieListItem.js</strong></p>

<pre><code>const MovieListItem = ({movie}) =&gt; {
  const imageUrl = movie.imageUrl;
  const mainCast = _.map(movie.mainCast, (cast) =&gt; {
    return(
        &lt;li className="list-item"&gt;
          {cast}
        &lt;/li&gt;
    )
  })
    return (&lt;li className="list-group-item"&gt;
              &lt;div className="video-list media"&gt;
                &lt;div className="media-left"&gt;
                  &lt;img className="media-object" src={imageUrl} alt={movie.title} /&gt;
                &lt;/div&gt;
                &lt;div className="media-body"&gt;
                  &lt;div className="media-heading"&gt;
                    &lt;h4 className="title"&gt;{movie.title}&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div className="main-cast"&gt;
                    &lt;ul id="cast-list"&gt;
                    {mainCast}
                    &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div className="reviewer"&gt;
                      &lt;div className="col-sm-3 col-xs-3"&gt;
                        &lt;img src={imdb} className="reviewer-img img-responsive" alt="imdb" /&gt;
                      &lt;/div&gt;
                      &lt;div className="col-sm-3 col-xs-3"&gt;
                        &lt;p className="reviewer-score"&gt;{movie.imdb}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className="col-sm-3 col-xs-3"&gt;
                        &lt;img src={rottenTomatoes} className="reviewer-img img-responsive" alt="rottenTomatoes"/&gt;
                      &lt;/div&gt;
                      &lt;div className="col-sm-3 col-xs-3"&gt;
                        &lt;p className="reviewer-score"&gt;{movie.rottenTomatoes}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
        )
};

export default MovieListItem;
</code></pre>