Add an extra option isLoading

currently, we only have an option hasMore to indicate if we have more options or not. In the code, we have hasMore && to show or not the Loader(spinner).

The problem is: If I set hasMore to true, I get the Loader in the screen, but the component does hundreds of requests. If I set hasMore to false when I’m doing the request, I avoid the hundreds of requests, but I don’t get the Loader.

[viniciusdacal]

@gautier-lefebvre Thanks for your advice. Indeed, that would work!

But I think, as we already have a loader in the component, let’s make it work properly.

[viniciusdacal]

I created a wrapper component that accepts the isLoading props. Then, instead of using react-infinite-scroller directly, I just use my wrapper:

import React, { Component } from 'react';
import InfiniteScroller from 'react-infinite-scroller';

const loader = (<UILoaderContainer />);

class InfiniteScroll extends Component {
  constructor(props) {
    super(props);
    this.handleInfiniteLoad = this.handleInfiniteLoad.bind(this);
  }

  handleInfiniteLoad() {
    const { isLoading, hasMore, children, loadMore } = this.props;

    if (!children || isLoading || !hasMore) {
      return;
    }

    loadMore();
  }

  render() {
    const { isLoading, hasMore, children } = this.props;
    return (
      <InfiniteScroller
        initialLoad={false}
        loader={null}
        className="infinite-scroll"
        hasMore={hasMore && !isLoading}
        loadMore={this.handleInfiniteLoad}
      >
        {children}
        {isLoading && loader}
      </InfiniteScroller>
    );
  }
}

export default InfiniteScroll;