Approach to the infinite scroll pagination combined with sorting and filtering

Hi fellow Artisans,

I've been building this app and during the development process I figured I need "filtering". What I mean by that is literally a sidebar with some checkboxes, dropdowns, etc, similar to the lessons page here on Casts. I also need to sort data by newest, oldest, etc. So the sidebar consists of a search bar, filters and sorting options and the main container consists posts paginated by "infinite scroll".

The way I implemented search/filter/sort right now is this:

user visits the page and N posts are initially loaded
user can scroll down to the bottom to load N more posts
user can click some checkboxes and lodash filters the items in real time
user scrolls down to the bottom to load N more posts and all filters applied with lodash the second posts are loaded
user removes a filter = this.filteredItems = this.allItems

From the UX point of view, this doesn't seem right... let's say I initially load 10 posts and all 10 posts are published 3 days ago or before. What if the user clicks "filter all posts published yesterday". That filter returns no posts (since no posts in the current 10 items have that filter) and the user needs to scroll down to the end of the page to load more posts. Or if the user searches the posts and initial 10 posts don't contain the query user wanted. Nothing will be filtered and user needs to scroll down to make an axios call for more posts. Just seems the bad UX. (Feels like this could be solved by manually triggering "infinite scroll" call but just haven't found a proper Vue library for that.)

How I thought about fixing it:

initially load N posts
user scrolls down to load N more posts (now 2 * N posts displayed)
on each filter applied / search input make an axios call that loads 2N posts with selected filters (this fixes the UX issue since there will be the same amount of posts as before)
on scroll load N more posts...

The issue is: is this possible with Laravel? I mean, I cannot take 20 posts then perform pagination on 5 more right, since ->paginate(5) overrides the LIMIT on SQL query, right?

Algolia seems right for this type of issue, but as "filtering" is the core of the app and will perform a lot of queries/sec and as I'm financing the app out of the pocket until it makes some income, $35/mo is pretty high, since the free tier is limited to 100k operations.

I was wondering how would you approach this problem, so please, let me know!

martinbean

7 years ago

Level 80

@crnkovic I hate infinite-scrolling websites with a passion. Mainly because—as you’ve found—the UX is terrible. It doesn’t play nicely with filtering and sorting, it’s usually over-agreesive (i.e. I’m trying to scroll to the actual bottom of the page to read something in the footer but more items are loaded instead), and if I click through to read an item but click back, it only loads the initial n items and I have to scroll over again and again.

It’s awful. My approach would be to avoid it and just use traditional page-based navigation instead.

crnkovic

7 years ago

Level 43

@martinbean Thanks for your input, I've given it a lot of thought and I think I'll be releasing MVP with page-based pagination and will see how the customers like it! And since my customers are regular (non "power-users"), any bad UX choice is just too confusing for them.

Please or to participate in this conversation.