How to avoid interaction latency when using LiveView?

In a regular web page using a framework like jQuery, when a user clicks a button, we can immediately show the selected effect by adding the class “selected” to the button.

However, in the case of using LiveView, the event needs to be sent back to the server through a WebSocket, and the server returns the updated HTML result for the user to see the selected effect.

There is a network delay involved in this process. In environments with poor network conditions, users may noticeably experience a delay between clicking the button and seeing the effect immediately. How do people typically solve this issue?

Client side interactions that need some kind of response immediately can be handled with Phoenix.Liveview.JS instead of just passing the name of the event to the phx-click or any other phx- event.


The real solution is, of course, to remove the problem entirely, and do whatever you can purely on the client-side, without involving the server.

The blessed path involves using Phoenix.LiveView.JS (as mentioned) and, where that is not enough, using phx-hook to add lifecycle hooks to your components.

I’m a big fan of AlpineJS for adding easy-bake interactivity (handling client-side state for opening/closing modals and that sort of stuff), but apparently it has some issues when you use it for more sophisticated stuff (search around and you’ll find issues on this forum).

1 Like