"Load more" instead of paging on search result page?

Elastic Search
1

Hi everyone!

Im using the search-ui library together with app search to build my first search result page. So far I looove it! :heart_eyes:

However, my customer has decided he does not want a traditional paging, but rather a "Load more hits" button.

Is it possible configure the <Paging> component to instead show a Load 20 more (showing 1-60 of 200) button? Or how would you solve such a requirement?

Best regards, Samuel

2

Hey @samuel-m!

Infinite scrolling is a pretty complex pattern to implement well.

One question: do you use trackUrlState? The reason I ask is because routing with infinite scrolling is quite challenging.

We dont support infinite scrolling out of the box but you could extend the Results component to have a listener when the user reaches the end of the page. When reached, request for a new set of results with the next set of results. Cache the previous set of results in the component and render the previous and next results together.

Read the code for Results component and Paging component

3

Thanks for your reply!

From my POV it's not infinite scroll I want. I'd say that infinite scroll is when more hits are added to the result list automatically when you scroll. That kind of behaviour I'd say is bad UX.

I want to load the first X number of hits, then display a button below the list where the user clicks to add another X hits to the already existing result list. Something like this: 'Load More Pagination' by Ikea | Web | UX Patterns & Examples

I found an old thread on elastic-search-ui/community - Gitter but it seems to come with some challenges.

Any help appreciated :slight_smile:

1 Like
4

yeh so what i mentioned above still holds true, just without the listener but an action to retrieve the next set of results.

Yeh the gitter has a rough example of what this might look like (retrieving the next set of results, caching the previous results, combining them into state held in the component)

Hope this helps

5

I'm so glad you're loving the product! If you'd love to tell us a bit more about what you love, I'd love to get 30 minutes of your time to chat about what you like and what your experience has been using the product. If that's something you're interested in, let me know and I can set up a time.

6

@Serena_Chou , I already have contact with a couple of swedish empolyees at Elastic, so I'm fine thank you :slight_smile:

7

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.