Optimistic UI Toggle with Automatic Rollback on Failure — Correct State Management

<div class="demo">
  <div class="opt-card">
    <div class="opt-row">
      <div>
        <span class="opt-title">Auto-renew subscription</span>
        <span class="opt-sub" id="optSub">Currently enabled</span>
      </div>
      <button class="opt-toggle on" id="optToggle" role="switch" aria-checked="true" aria-label="Toggle auto-renew">
        <span class="opt-knob"></span>
      </button>
    </div>

    <div class="opt-log" id="optLog" role="status" aria-live="polite">Ready.</div>
    <p class="opt-hint">Toggling simulates a network request that fails ~40% of the time — watch it roll back automatically on failure.</p>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }

.opt-card { width: 340px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opt-title { display: block; font-size: 13.5px; font-weight: 700; color: #111827; }
.opt-sub { display: block; font-size: 11.5px; color: #94a3b8; font-weight: 600; margin-top: 2px; }

.opt-toggle { width: 46px; height: 27px; border-radius: 999px; background: #e2e8f0; border: none; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.opt-toggle.on { background: #34d399; }
.opt-toggle.pending { opacity: 0.7; cursor: wait; }
.opt-knob { position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; display: flex; align-items: center; justify-content: center; }
.opt-toggle.on .opt-knob { transform: translateX(19px); }
.opt-toggle.pending .opt-knob::after { content: ''; width: 10px; height: 10px; border: 2px solid #cbd5e1; border-top-color: #6366f1; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.opt-log { font-size: 11.5px; font-weight: 600; color: #64748b; background: #f8fafc; border-radius: 9px; padding: 9px 11px; min-height: 16px; }
.opt-log.error { color: #b91c1c; background: #fef2f2; }
.opt-log.success { color: #15803d; background: #f0fdf4; }

.opt-hint { font-size: 11px; color: #94a3b8; line-height: 1.5; }

const toggle = document.getElementById('optToggle');
const subEl = document.getElementById('optSub');
const logEl = document.getElementById('optLog');

let serverState = true; // the "confirmed" state, as last acknowledged by the server
let pending = false;

function setLog(text, kind) {
  logEl.textContent = text;
  logEl.className = 'opt-log' + (kind ? ' ' + kind : '');
}

function renderToggle(isOn) {
  toggle.classList.toggle('on', isOn);
  toggle.setAttribute('aria-checked', String(isOn));
  subEl.textContent = isOn ? 'Currently enabled' : 'Currently disabled';
}

// Simulates a real network request with a 40% failure rate and realistic latency.
function fakeApiCall(nextState) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const willFail = Math.random() < 0.4;
      if (willFail) reject(new Error('Network error — please try again.'));
      else resolve(nextState);
    }, 700 + Math.random() * 500);
  });
}

toggle.addEventListener('click', async () => {
  if (pending) return; // ignore clicks while a request is already in flight

  const nextState = !serverState;
  pending = true;
  toggle.classList.add('pending');
  toggle.disabled = true;

  // Optimistic update: reflect the new state immediately, before the "server" confirms it.
  renderToggle(nextState);
  setLog('Saving…');

  try {
    const confirmed = await fakeApiCall(nextState);
    serverState = confirmed;
    setLog(`Saved — auto-renew is now ${confirmed ? 'on' : 'off'}.`, 'success');
  } catch (err) {
    // Roll back: revert the UI to the last confirmed server state, not just "the opposite".
    renderToggle(serverState);
    setLog(`${err.message} Reverted to previous state.`, 'error');
  } finally {
    pending = false;
    toggle.classList.remove('pending');
    toggle.disabled = false;
  }
});