Optimistic UI

UI updates before server confirmation.

html

<div class="lod-opt-stage" data-outcome="success">
  <button type="button" class="lod-opt-btn lod-opt-btn--on" style="background:#A8E6C1;">&#10003; Add to favourites</button>
  <p class="lod-opt-status">UI updated instantly, before the server replied.</p>
  
  <p class="lod-opt-caption">Optimistic: assume success, then reconcile if the server disagrees</p>
</div>
<style>
.lod-opt-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.lod-opt-btn { font-weight: 700; border: none; border-radius: 8px; padding: 9px 14px; color: #241430; cursor: pointer; }
.lod-opt-status { margin: 10px 0 0; font-size: 12px; }
.lod-opt-result { margin: 6px 0 0; font-weight: 600; }
.lod-opt-result--success { color: #241430; }
.lod-opt-result--rollback::after { content: " \2014 rolled back, action failed"; color: #241430; }
.lod-opt-result--success::after { content: " \2014 no change needed"; }
.lod-opt-caption { margin: 10px 0 0; font-size: 11px; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70" data-outcome="success">
  <button type="button" class="font-bold border-0 rounded-lg px-3.5 py-2.5 text-[#241430] cursor-pointer" style="background:#A8E6C1;">&#10003; Add to favourites</button>
  <p class="mt-2.5 text-xs">UI updated instantly, before the server replied.</p>
  
  <p class="mt-2.5 text-[11px] text-[#241430]/70">Optimistic: assume success, then reconcile if the server disagrees</p>
</div>
<style>
.tw-opt-rollback::after { content: " \2014 rolled back, action failed"; }
.tw-opt-success::after { content: " \2014 no change needed"; }
</style>

react

export function OptimisticUI({
  outcome = "success",
  confirmed = false,
  itemLabel = "Add to favourites",
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      <button type="button" style={{ fontWeight: 700, border: "none", borderRadius: 8, padding: "9px 14px", color: "#241430", cursor: "pointer", background: accent }}>&#10003; {itemLabel}</button>
      <p style={{ margin: "10px 0 0", fontSize: 12 }}>UI updated instantly, before the server replied.</p>
      {confirmed && (
        <p role="status" style={{ margin: "6px 0 0", fontWeight: 600 }}>
          Server confirmed {outcome === "rollback" ? "\u2014 rolled back, action failed" : "\u2014 no change needed"}
        </p>
      )}
      <p style={{ margin: "10px 0 0", fontSize: 11, color: "#241430aa" }}>Optimistic: assume success, then reconcile if the server disagrees</p>
    </div>
  );
}