Add an extra option isLoading

[viniciusdacal]

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]

Btw, I love this component! It's simple and easy to understand.

[gautier-lefebvre]

Alternatively, you can do something like this:

<InfiniteScroll
    {...}
    hasMore={hasMore && !isLoading}
>
    { ...content }

    { isLoading ?
        <Loader />
        : null }

</InfiniteScroll>

[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.

[jaspal747]

Thank you for this awesome plugin guys. This is very much a needed feature. LoadMore fires hundreds of requests while it is fetching data from the server. An official solution to acknowledge the loading state would be excellent.

[techrah]

I've tried playing with hasMore as well to avoid the rapid-fire loadMore event but because it controls the loading indicator as well, it's a no-go.

Perhaps a better approach might be to solve the rapid loadMore event firing issue since this seems to be what we're all really trying to get around here. Then, we won't need the extra parameter.

[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;

[scmarlatt]

bump

[Gsiete]

Mmm, yeah, that sounds much better than: loadMore={!isLoading ? loadNextPage : () => {}} :D

[apurvgandhwani]

@viniciusdacal where to put the api call to load more data?