<div class="demo">
  <button class="async-btn" id="asyncBtn" data-state="idle">
    <span class="btn-spinner" aria-hidden="true"></span>
    <svg class="btn-icon icon-success" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    <svg class="btn-icon icon-error" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
    <span class="btn-text" id="btnText">Save changes</span>
  </button>
  <p class="hint">~35% of clicks simulate a failure — click repeatedly to see every state</p>
</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; flex-direction: column; gap: 12px; }

.async-btn { display: inline-flex; align-items: center; gap: 8px; background: #4f46e5; color: #fff; border: none; padding: 12px 22px; border-radius: 11px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.2s; min-width: 140px; justify-content: center; }
.async-btn:hover:not(:disabled) { background: #4338ca; }
.async-btn:disabled { cursor: not-allowed; }

.btn-spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; }
.btn-icon { display: none; }

.async-btn[data-state="loading"] { background: #6366f1; }
.async-btn[data-state="loading"] .btn-spinner { display: inline-block; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.async-btn[data-state="success"] { background: #16a34a; }
.async-btn[data-state="success"] .icon-success { display: inline-block; }

.async-btn[data-state="error"] { background: #dc2626; }
.async-btn[data-state="error"] .icon-error { display: inline-block; }

.hint { font-size: 11.5px; color: #94a3b8; max-width: 280px; text-align: center; }

const btn = document.getElementById('asyncBtn');
const btnText = document.getElementById('btnText');

const LABELS = {
  idle: 'Save changes',
  loading: 'Saving…',
  success: 'Saved!',
  error: 'Failed — retry',
};

let resetTimer = null;

function setState(state) {
  btn.dataset.state = state;
  btnText.textContent = LABELS[state];
  btn.disabled = state === 'loading';
}

// Simulates an async save request with realistic latency and a genuine failure rate.
function fakeSave() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.35) reject(new Error('Save failed'));
      else resolve();
    }, 900 + Math.random() * 500);
  });
}

async function handleClick() {
  // Ignore clicks while a save is actively in flight — the button is also
  // natively disabled during "loading", but this guards against any edge
  // case where a click could still slip through (e.g. Enter key repeat).
  if (btn.dataset.state === 'loading') return;

  clearTimeout(resetTimer);
  setState('loading');

  try {
    await fakeSave();
    setState('success');
  } catch (err) {
    setState('error');
  }

  // Return to idle automatically after a pause, but only from a terminal
  // state (success/error) — never interrupt an in-flight loading state.
  resetTimer = setTimeout(() => {
    if (btn.dataset.state !== 'loading') setState('idle');
  }, 1800);
}

btn.addEventListener('click', handleClick);