Optimistic State

State updated before server confirmation.

html

<div class="opt opt--optimistic" role="status">
  <p class="opt__label">Post</p>
  <div class="opt__like" style="--a:#F5C2E0;">&#9829; <span class="opt__count opt__count--optimistic">12 + 1</span><span class="opt__count opt__count--confirmed">12 + 1</span><span class="opt__count opt__count--rolled-back">12</span></div>
  <p class="opt__note opt__note--optimistic">UI updated instantly, before the server replied.</p>
  <p class="opt__note opt__note--confirmed">Server confirmed &mdash; optimistic value was correct.</p>
  <p class="opt__note opt__note--rolled-back">Server rejected the like &mdash; UI rolled back to the real count.</p>
</div>
<style>
.opt { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.opt__label { margin: 0 0 10px; font-weight: 700; }
.opt__like { padding: 12px; border-radius: 8px; background: #24143010; text-align: center; font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.opt__count { display: none; }
.opt--optimistic .opt__count--optimistic, .opt--confirmed .opt__count--confirmed, .opt--rolled-back .opt__count--rolled-back { display: inline; }
.opt--optimistic .opt__like, .opt--confirmed .opt__like { color: var(--a); }
.opt__note { display: none; margin: 0; font-size: 11px; color: #24143099; }
.opt--optimistic .opt__note--optimistic, .opt--confirmed .opt__note--confirmed, .opt--rolled-back .opt__note--rolled-back { display: block; }
</style>

tailwind

<div class="opttw opttw--optimistic font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border" role="status">
  <p class="m-0 mb-2.5 font-bold">Post</p>
  <div class="opttw__like p-3 rounded-lg bg-[#24143010] text-center text-xl font-extrabold mb-2.5" style="--a:#F5C2E0;">&#9829; <span class="opttw__count opttw__count--optimistic hidden">12 + 1</span><span class="opttw__count opttw__count--confirmed hidden">12 + 1</span><span class="opttw__count opttw__count--rolled-back hidden">12</span></div>
  <p class="opttw__note opttw__note--optimistic hidden m-0 text-[11px] text-[#24143099]">UI updated instantly, before the server replied.</p>
  <p class="opttw__note opttw__note--confirmed hidden m-0 text-[11px] text-[#24143099]">Server confirmed &mdash; optimistic value was correct.</p>
  <p class="opttw__note opttw__note--rolled-back hidden m-0 text-[11px] text-[#24143099]">Server rejected the like &mdash; UI rolled back to the real count.</p>
</div>
<style>
.opttw--optimistic .opttw__count--optimistic, .opttw--confirmed .opttw__count--confirmed, .opttw--rolled-back .opttw__count--rolled-back { display: inline; }
.opttw--optimistic .opttw__like, .opttw--confirmed .opttw__like { color: var(--a); }
.opttw--optimistic .opttw__note--optimistic, .opttw--confirmed .opttw__note--confirmed, .opttw--rolled-back .opttw__note--rolled-back { display: block; }
</style>

react

export function OptimisticState({
  itemLabel = "Post",
  stage = "optimistic",
  accent = "#F5C2E0",
  baseLikes = 12,
}) {
  const count = stage === "rolled-back" ? baseLikes : `${baseLikes} + 1`;
  const notes = {
    optimistic: "UI updated instantly, before the server replied.",
    confirmed: "Server confirmed \u2014 optimistic value was correct.",
    "rolled-back": "Server rejected the like \u2014 UI rolled back to the real count.",
  };
  return (
    <div role="status" style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontWeight: 700 }}>{itemLabel}</p>
      <div style={{ padding: 12, borderRadius: 8, background: "#24143010", textAlign: "center", fontSize: 20, fontWeight: 800, marginBottom: 10, color: stage !== "rolled-back" ? accent : "#241430" }}>&#9829; {count}</div>
      <p style={{ margin: 0, fontSize: 11, color: "#24143099" }}>{notes[stage]}</p>
    </div>
  );
}