How do you achieve Optimistic UI in Phoenix with LiveView?

LiveView now adds some classes, such as phx-click-loading, whenever you do an action. This can be used to provide some UI feedback and in many cases. For more complex cases like the chat example, then you need to fallback to JS with phx hooks.

6 Likes

Another approach, probably best implemented within LiveView itself, is to preemptively evaluate and send the changes that would result if the action where taken. Assuming that the code that generates the template is pure with no side effects (or can be parameterized to disable side effect code), then the renderer could “follow” actions such as click events and include that diff along with the current payload. This best supports actions that result in a limited number of determinist outcomes. The tree of possible actions is probably prohibitively large or even infinite so configuring an allowed number of traversals and allowing for explicit overrides of actions/branches might be necessary.

Of course, having elixir run in the browser is even better…