appbaseio / appbaseio/reactivesearch

Continuous pagination / Infinite scroll pagination / "Load more" pagination

Open
#1,379 1 comment 2 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
4.9k
Forks
478
PR merge metrics
No merged PRs in 30d

Description

**Affected Projects**
We're working on a **Vue.JS** project, but I think it'd be worth to bring this feature to **React** and **React Native** as well.

**Is your feature request related to a problem? Please describe.**
The only pagination currently implemented in Reactive Search is the standard pagination with the bar on the bottom of the results. We'd like to have a pagination with the "Load more" button instead.

**Describe the solution you'd like**
The features that the solution should have are mainly taken from [this article](https://webmasters.googleblog.com/2014/02/infinite-scroll-search-friendly.html) and from [this reference implementation](http://scrollsample.appspot.com/items). It should be both SEO-friendly and user-friendly, it should work both on the client and on the server-side rendering.

There's a "Load more" button on the bottom of the results. When the user clicks on this button:
* the next page of results is loaded and appended below the current results
* the URL is updated with the new page number

When I open a URL that has the page number _n_ in its query string:
* only the _n_ page of results is loaded
* above the results there a "Load previous" button that on click loads the previous page
* below the results there's a "Load more" button with the aforementioned behavior

**Additional context**
We're **currently working** on the Vue.JS implementation. We'd like to get to a working version and to open a PR for this feature.
Any kind of feedback on this feature from the community or from the maintainers is much appreciated!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.