Offset initiated pagination
I'm working on an "infinite scroll" contacts list but I'm not sure that Convex supports the behavior I'm looking for:
- I group contacts by the first letter of their name. I cache the A) number of groups B) number of contacts in each group C) total number of items. I'm using https://virtuoso.dev/scroll-to-group/ and the advantage of caching these three things is the user can jump to a letter and I can set the scrollbar size accurately as I know the total item count (it won't snap around as the user scrolls). This gives the user the illusion that the entire list of contacts is right there.
I've looked at the
getPage helper function for custom pagination, I think it can solve some of my problems, like jumping to a letter group directly but I don't think it solves all of my problems.
For example, as the scrollbar is accurately sized to the total number of contacts, the user can drag it very rapidly from top to bottom. The problem is that Convex will continually call loadMore for every page until the last. Instead, I can see the start/end indexes of the "slice" of the virtuoso list I'm in. Once this stops changing rapidly, I would like to exchange it to Convex for a cursor and then start paging as normal from there as the user scrolls. In other words, I need to support the user jumping to a random location in the list, identified by an offset, and only load that page directly.
Is this possible?Scroll to Group | React Virtuoso
This example re-creates the UI of the iOS contacts listview.
2 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
A nice syntax for this would be
loadMoreAtIndex(at: index)
This would restart pagination beginning at index