How to recover page state in "load more" pagination or infinite scrolling


I have “load more” type of pagination in my LiveView app that I implement through phx-update="append". However, when there is a reconnection, the page state is lost – meaning only the initially fetched items are rendered and all the user loaded items are lost.

I have thought of 2 solutions. I was curious if there is a better solution because both these solutions have certain limitations.

Solution 1: Store page count in a hidden form or a data attribute. When there is a reconnection, fetch all items in a single query. A big downside of this approach is that it may increase the DB load depending on the page count.

Solution 2: Implementing infinite scroll pagination (instead of load more) similar to “Discourse” (e.g. ElixirForum), by keeping the page/section state in the URL. However, I think there may always be some parts of the app where a “load more” type of pagination is needed (where you don’t store the page state in the URL).

How would you tackle this problem? (This question also applies to infinite scrolling)

Also related to this, is there a way to efficiently render the previously fetched items when the user uses the browser’s back functionality to go back to the page with “load more” pagination, without reloading all the items from the previous session? This may be within the domain of javascript, but I would love to learn how a javascript solution would play well with a robust live view solution.


1 Like