How do I optimize LiveView when using pagination?

Phoenix Forum Questions / Help
1

Lets start with the code https://gist.github.com/joshchernoff/677a5a7f21f2c201ab9f754f7fe97d98

I’ve been trying to follow along with this guide about how to use Temporary assigns along with prepend to optimize the payload being sent over the wire when there is an update. I wonder if thats even possible to do with the example code I’ve provided.

The first issue I run into is that it looks like I break my pagination when using live_path

I’m not really sure if I can do it any other way than I’m currently doing it. I send all the posts as the result of only one getting a small update (likes count). Seems like I could be doing this better than I am, but I’ve hit a bunch of walls trying to use the guide to optimize. Any ideas?

1 Like
2

Edit: I’d like to rephrase

The first issue I run into is that it looks like I break my pagination when using live_path
The first issue I run into is that it looks like I break my pagination when using prepend as you would expect.

Since change tracking only works per assigns or when using a temporary_assigns + append/prepend, what is the recommended way for views like indexes where you have possibly a large set (say posts) where you have likes or there are things that only update in a single post and you don’t want to fetch the whole list.

3

LiveView tracks things by DOM ID. So as long you make the container with phx-update=“prepend” have a different DOM ID whenever the page changes, for example by append the current page to the DOM ID, then everything will work:

  1. whenever the page changes, you start with a fresh container
  2. you can still prepend to the container

However, I think that pagination is most likely a poor fit for something that also receives updates live. If you are on page 2 and there is new content, what do you do?

Maybe a better fit is this:

  1. you have two containers (one for prepending and another for appending)
  2. LV updates go to the prepend container
  3. You have a button at the bottom that says “load more”. whenever you click “load more”, you append new entries to the append container

Of coruse, there are UI/UX considerations here that are outside of using LV or not, but whatever approach you choose should be doable!

5 Likes
4

I over looked LiveComponent, whats your thoughts about mounting a LiveComponent for each item in the list of posts and subscribe at the LiveComponent level?

I’m reviewing https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html#module-liveview-as-the-source-of-truth

My first thought was I would be able to subscribe to the pubsub inside the LiveComponent and handle the handle_info directly in the LiveComponent but I guess I was wrong about that. Looks like I will still need to handle the handle_info in the parent updating the whole list.

Edit: after reading more I learned what I was trying to do was not possible via the way I wanted to because of the source of truth was being mixed between the LiveView and the LiveComponent

5

So this was my compromise.



by converting each post into a LiveComponent I also diff the change of only one post given I have some update like likes count and it works with a cursor based pagination.

The down side to this is that I keep as many posts as I have per page in memory.
That said I like the fact that I’m also diffing on the wire per handle_info so :man_shrugging: