How to restore LiveView state when using infinite scroll when browser back button is clicked?
I have a UX problem I'm trying to solve and not entirely sure how to go about solving it.
User is on LiveView 1 that is a list view using infinite pagination + sort params + filter params
User clicks on a record that navigates them to the record details LiveView 2
When the user clicks the browser back button, they expect to be taken back to the list view in the same state with the scroll position restored showing the record they clicked on.
Problem:
When the user clicks back, LiveView 1 mount fires to query for page 1 and the record they clicked to go to LiveView 2 may not be there yet due to the infinite pagination.
Storing the page number or number of loaded records doesn't help as things can change while the user is in the record LiveView 2. i.e. other records changing state or created.
So, how do you restore LiveView 1 to the previous state to fit the user's expectations when clicking the browser's back button and account for other records changing state where the query returns a different list?
Hopefully I am making this clear. Been researching how to deal with this for a while and don't have a good solution yet. Figured there is someone that has dealt with this before. Most likely I'm missing some whizbang Ash thing that can help me with this.
I'm using Keyset pagination
Maybe storing the keyset in the client via a hook and then using that keyset to query the initial data if the client has it?
2 Replies
Use keyset pagination and store the `after' cursor
I'll see if that works. I'm also considering if having the record detail liveview in its own route makes sense. So making the record detail (LiveView 2) a child liveview or live component might be the better route to avoid all the complexity.