Pessimistic UI

UI waits for server confirmation before updating.

html

<div class="lod-pes-stage" data-scenario="payment">
  <button type="button" class="lod-pes-btn" style="--accent:#241430;" disabled>Pay now</button>
  <span class="lod-pes-spin" role="status" aria-live="polite">Waiting for the server before updating anything&hellip;</span>
  
  <p class="lod-pes-caption">Pessimistic: nothing changes on screen until the server replies</p>
</div>
<style>
.lod-pes-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-pes-btn { font-weight: 700; border: none; border-radius: 8px; padding: 9px 16px; background: #24143022; color: #24143066; cursor: not-allowed; }
.lod-pes-btn--done { background: var(--accent); color: #FAF7F2; cursor: pointer; }
.lod-pes-spin { display: block; margin-top: 10px; font-size: 12px; }
.lod-pes-done { margin: 10px 0 0; font-weight: 600; color: #241430; }
.lod-pes-caption { margin: 10px 0 0; font-size: 11px; }
</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-scenario="payment">
  <button type="button" class="tw-pes-btn font-bold border-0 rounded-lg px-4 py-2.5 cursor-not-allowed" style="--accent:#241430;" disabled>Pay now</button>
  <span role="status" aria-live="polite" class="block mt-2.5 text-xs">Waiting for the server before updating anything&hellip;</span>
  
  <p class="mt-2.5 text-[11px]">Pessimistic: nothing changes on screen until the server replies</p>
</div>
<style>
.tw-pes-btn { background: #24143022; color: #24143066; }
.tw-pes-done { background: var(--accent); color: #FAF7F2; cursor: pointer; }
</style>

react

export function PessimisticUI({
  confirmed = false,
  scenario = "payment",
  itemLabel = "Pay now",
  accent = "#241430",
}) {
  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" disabled={!confirmed} style={{ fontWeight: 700, border: "none", borderRadius: 8, padding: "9px 16px", cursor: confirmed ? "pointer" : "not-allowed", background: confirmed ? accent : "#24143022", color: confirmed ? "#FAF7F2" : "#24143066" }}>{itemLabel}</button>
      {!confirmed && <span role="status" aria-live="polite" style={{ display: "block", marginTop: 10, fontSize: 12 }}>Waiting for the server before updating anything&hellip;</span>}
      {confirmed && <p role="status" style={{ margin: "10px 0 0", fontWeight: 600, color: "#241430" }}>Confirmed &mdash; now the UI updates</p>}
      <p style={{ margin: "10px 0 0", fontSize: 11 }}>Pessimistic: nothing changes on screen until the server replies</p>
    </div>
  );
}