Auto-Retry Loader with Exponential Backoff Countdown and Manual Retry

<div class="demo">
  <div class="retry-card" id="retryCard">
    <div class="retry-spinner" id="retrySpinner"></div>
    <p class="retry-title" id="retryTitle">Loading dashboard…</p>
    <p class="retry-sub" id="retrySub">Fetching your latest data</p>
    <button class="retry-btn" id="retryBtn" hidden>Retry now</button>
  </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; }
.demo { width: 320px; max-width: 100%; }

.retry-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }

.retry-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #e2e8f0; border-top-color: #6366f1; animation: spin 0.8s linear infinite; }
.retry-spinner.error { border: none; width: 30px; height: 30px; background: #fef2f2; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: none; }
.retry-spinner.error::before { content: '!'; color: #ef4444; font-weight: 800; font-size: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }

.retry-title { font-size: 13.5px; font-weight: 700; color: #111827; }
.retry-sub { font-size: 12px; color: #64748b; line-height: 1.6; }
.retry-sub .countdown-num { font-weight: 700; color: #ef4444; font-variant-numeric: tabular-nums; }

.retry-btn { margin-top: 6px; padding: 9px 18px; border: none; border-radius: 9px; background: #4f46e5; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.retry-btn:hover { background: #4338ca; }

const spinner = document.getElementById('retrySpinner');
const title = document.getElementById('retryTitle');
const sub = document.getElementById('retrySub');
const retryBtn = document.getElementById('retryBtn');

const MAX_ATTEMPTS = 3;
let attempt = 0;
let countdownInterval = null;

// A real fetch that fails on purpose the first couple of times, so the
// full retry/backoff/give-up sequence is visible in this demo. Replace the
// body of this function with a real network request in production —
// everything else (backoff timing, countdown UI, give-up state) is generic.
function simulateRequest() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (attempt < 2) reject(new Error('Network error'));
      else resolve({ ok: true });
    }, 900);
  });
}

function setLoadingState() {
  spinner.className = 'retry-spinner';
  title.textContent = 'Loading dashboard…';
  sub.textContent = attempt === 0 ? 'Fetching your latest data' : `Retrying (attempt ${attempt + 1} of ${MAX_ATTEMPTS})…`;
  retryBtn.hidden = true;
}

function setSuccessState() {
  spinner.className = 'retry-spinner';
  spinner.style.animation = 'none';
  spinner.style.borderColor = '#10b981';
  title.textContent = 'Dashboard loaded';
  sub.textContent = 'Everything is up to date.';
  retryBtn.hidden = true;
}

// Exponential backoff: each failed attempt waits LONGER than the last before
// retrying automatically (2s, then 4s, then 8s...) rather than hammering a
// struggling server at a constant interval — the countdown timer shown to
// the user is driven by this same computed delay, so what they see always
// matches what's actually about to happen.
function backoffDelayMs(attemptNumber) {
  return 2000 * Math.pow(2, attemptNumber);
}

function setFailedWithCountdown(secondsLeft, onZero) {
  spinner.className = 'retry-spinner error';
  title.textContent = 'Couldn\'t load the dashboard';
  sub.innerHTML = `Retrying automatically in <span class="countdown-num">${secondsLeft}</span>s…`;
  retryBtn.hidden = false;

  clearInterval(countdownInterval);
  countdownInterval = setInterval(() => {
    secondsLeft -= 1;
    if (secondsLeft <= 0) {
      clearInterval(countdownInterval);
      onZero();
    } else {
      sub.innerHTML = `Retrying automatically in <span class="countdown-num">${secondsLeft}</span>s…`;
    }
  }, 1000);
}

function setGaveUpState() {
  clearInterval(countdownInterval);
  spinner.className = 'retry-spinner error';
  title.textContent = 'Still unable to load';
  sub.textContent = `Gave up after ${MAX_ATTEMPTS} attempts. You can try again manually.`;
  retryBtn.hidden = false;
  retryBtn.textContent = 'Try again';
}

async function attemptLoad() {
  setLoadingState();
  try {
    await simulateRequest();
    setSuccessState();
  } catch (err) {
    attempt += 1;
    if (attempt >= MAX_ATTEMPTS) {
      setGaveUpState();
      return;
    }
    const delayMs = backoffDelayMs(attempt);
    setFailedWithCountdown(Math.round(delayMs / 1000), attemptLoad);
  }
}

retryBtn.addEventListener('click', () => {
  clearInterval(countdownInterval);
  // A manual retry click resets the exponential backoff sequence entirely —
  // it's treated as a fresh user-initiated attempt, not "attempt N+1" of the
  // automatic sequence, since the user has actively signaled continued
  // interest rather than passively waiting out the countdown.
  if (title.textContent.includes('Still unable')) attempt = 0;
  attemptLoad();
});

attemptLoad();