Support infinite loading in actuators via Load More button

[metagrover]

[siddharthlatest]

Spec:

showMore={(loadMore)=>(<ShowMoreComponent onClick={loadMore} />)}

or

showMore={true}

In the latter case, we will render a button to show the load more functionality.

• This prop is only used if pagination prop is set to false.

[metagrover]

How about:

showLoadMore={true}

renders a Load More button instead of performing infinite loading on scroll. And to customize the Load More button: use loadMoreLabel which will render the button text as

<loadMoreLabel> (count of items)

and to completely customise the rendering element:

loadMoreButton={(loadMore, count)=>(<ShowMoreComponent onClick={loadMore} />)}

[davidklebanoff]

Not to complicate things too much, but it may be worth keeping in mind some patterns I see fairly often: Sometimes websites use infinite loading for the first X records, and then popup the load more button after.

For example, I see a use case where 50 results are initially shown, and each time the user scrolls near the bottom of the results, 50 more results are loaded via infinite scroll. However, after they hit 500, the "load more" button pops up. 50 additional results can be loaded each time it's clicked. This provides lazy loading results, infinite scrolling advantages, and helps throttle requests in the more extreme cases of aggressive scrolling.

If you want to get even fancier with the functionality, you could provide a property that is a functional hook that allows the function to determine when to show "load more" label by returning a boolean. This way developers could have ultimate control of when to invoke the "load more" button and could do more advanced algorithms like exponential back off. (e.g. Load up to 500 results the first time, 250 the second, 100 the third, and then 50 for each remaining click.)

[metagrover]

That's a really good point. While this is also achievable by the API spec I proposed (since all the props can be dynamically plugged-in), I think we can also expose this as a prop that can accept a threshold count value.