I created a data view (data are fetched from DB through server component), where data are presented in cards layout and paginated through load more strategy. The load more is done automatically while scrolling, but that's not really relevant :)
On each card, user has an action to delete it, which triggers a server action to delete the item from the DB. The desired outcome is that the UI updates and the item card disappear from the view.
However this works only when deleting items from the first page. Whenever you scroll down to page 2+ and delete an item, it deletes it from the DB, but the UI doesn't update and the card is still visible, until you fully refresh the page and load next pages.
I suppose this is kind of an expected thing to happen, as after the delete (server) action is triggered a partial page refresh happens (I guess), which re-loads the data of the first page.
What would be the preferred approach of correctly adjusting the UI?
Repo with the issue: https://github.com/theboxer/pagination-example (please note that the deleted items are not stored anywhere and full page reload will display the original dataset)
I tried probably the most dumb thing in react - to modify the DOM directly, and tried to remove the DOM element after the server action triggered, which OFC had totally unpredictable behaviour ranging from removing 2 DOM nodes (siblings) or duplicating some other cards...
Managed to get it working, with a help of a global state. Solution is in the GH repo linked in the question.