Create a "Load more" widget

[vvo]

As a starting point of an infinite scroll documentation/idea, at least having a "Load More" widget seems mandatory.

I am not yet sure on the best way on how to do that in react-instantsearch.

Should we also provide a connector?

[bobylito]

I think it could be solve with a specific connector that will keep in its state the knowledge of the previous pages.

[bobylito]

Proposal 💡 🕵️‍♀️ 🕵️

Providing just a load more button won't work because the hits widget is stateless and the API returns
only the results for the requested page. This means that we need to store the results from the previous
pages in order to continue to display them.

What we need 🤓

• a widget that displays a list of results that will grow as we load more pages
• the widget will reset the amount of results displayed when something else than the page is changed

Limitations 💣

• the widget will be incompatible with the pagination because the navigation can then be non-linear (a user can jump from page 1 to 3)

Implementation details 📖

• The connector will keep the list of the previously displayed pages and provide them to the connected component
• The refine function can take no parameters and will increment the page by 1
• The component should display a load more button that will be bound to the refine function
• The widget will have a prop called itemComponent like <Hits/>
• We are not working around the limitations of the API (eg: we're not gonna use browse)

Example 🚀

<InstantSearch ...config>
  <LoadMoreHits/>
</InstantSearch>

[vvo]

You just emojied us and it works! LGTM Bring the 1000HitsWidget Now! 🎵 💪