skip to Main Content

I’m trying to design a page that supports infinite scroll. There is 1 important feature that we definitely want this to support: we want to be able to update the already loaded items if an item is changed/deleted.

For example, imagine your Twitter homepage is loaded and one of the loaded tweets gets deleted. Our ideal list needs to be able to get updated with the changes.

The normal way I had in mind was to call a method such as loadTweets(pageNumber = 1) and as the user scrolls down, pageNumber increments and we make the API call again. But this will not support keeping track of already loaded items.

2

Answers


  1. Chosen as BEST ANSWER

    Beside the the great response which Mark shared, I also found out that Firebase does the exact thing for us very efficiently and it's explained in great detail in the following video:

    https://www.youtube.com/watch?v=3aoxOtMM2rc&ab_channel=Firebase


  2. The first option that springs to my mind is to model this as a stream of immutable events, e.g.:

    • Item 1234 deleted
    • Item 5678 created { data }
    • Item 1234 changed { data }
    • Item 9012 created { data }
    • Item 1234 created { data }

    (Most recent events on top)

    You can implement this using a pub/sub mechanism, or emulating an event stream as a feed of events, like, for example, RSS or ATOM. Allamaraju Subrahmanyam’s RESTful Web Services Cookbook has some good content on the latter option. For the first option, you may want to consult Enterprise Integration Patterns by Hohpe and Woolf.

    It’ll be the responsibility of the UI to interpret the events by, for example, removing or updating items as new events appear.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search