Optimistic Updates
If an endpoint may be slow to return a response, using hx-indicator to display a spinner is a good idea. Additionally, the UI can assume success and update itself optimistically. For example, clicking a “like” button can immediately change its color to a muted version of the color that will be used when the response is received. If the response indicates success, the color can be changed to the full color. If the response indicates failure, the color can be reset.
Doing this gives the user confidence that their input was received, and also informs them that the change hasn’t yet been finalized.
The following HTML renders a table of dog breeds. On line 17, the table rows are inserted by sending a GET request to the /table-rows ...
Get Server-Driven Web Apps with htmx now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
