Optimistic UI
Immediately reflects visual state changes on interaction before the server responds. Reverts on error.
<rhx-optimistic>
Examples
The
rhx-optimistic attribute is supported on <rhx-switch>,
<rhx-rating>, and <rhx-button>. It adds a
data-rhx-optimistic data attribute; the companion JavaScript handles
visual state management and error rollback.
Optimistic Switch
Toggle flips immediately. If the server returns an error, it reverts.
<rhx-switch name="darkMode" rhx-label="Dark mode"
rhx-optimistic="true"
hx-post="/api/settings/darkMode"
hx-trigger="change" hx-swap="none" />Optimistic Rating
Stars update immediately on click. Reverts if the server rejects the rating.
<rhx-rating name="score" rhx-label="Rate this"
rhx-optimistic="true"
hx-post="/api/rating"
hx-trigger="change" hx-swap="none" />Optimistic Button
Button enters loading state on click. Reverts on server error.
<rhx-button rhx-variant="brand" rhx-optimistic="true"
hx-post="/api/like"
hx-swap="none">
Like
</rhx-button>