Infinite scroll on real-time data

Question

I am trying to implement infinite scrolling in a web application, records maybe added or deleted from the server, sorted in alphabetical order of their id, also the associated data can also change at any time and I have to show the latest data. I understand how infinite scrolling works and how to show the latest data for a fixed set of objects (in my case, polling on it repeatedly and dumping the data in view), but I am unable to understand how to integrate both. The API uses a cursor and sends me 20 records each time. Please help

Answer 1

I think I understand what is your main concern. Infinite scrolling with real time updates is very hard to achieve. You have to think it thru and figure out what really you want to achieve. There are couple situations to consider, to simplify, let's assume we use a grid with rows:

1. Visible row has changed (edit)
2. A new row was added between visible rows (add)
3. An existing row was removed from visible rows (delete)
4. Loaded row has changed (edit)
5. A new row was added between previously loaded rows, but they're not visible - we scrolled down (add)
6. An existing row has been removed from loaded rows (delete)
7. Any change in not loaded row is trivial - as we still have to load it

I think the biggest problem here is to operate with rows which are loaded and aren't visible. Any change made won't be visible for a user. Since that's the case, have you considered virtual scrolling? So show only 10 rows and replace them when user scrolls up / down. If you really want to have infinite scrolling, the good way would be notifying users, that the data has been changed, and you have to re-render the whole infinite scrolling. In that case, user decides to refresh already loaded data. You can grab what's visible and try to compute what to show to him (to reflect the previous state with added/removed/edited rows)