Infinite spinner

Problem Context

• A request can hang, fail silently, be queued for a long time, or lose its completion event.
• The screen or control remains disabled while an indeterminate spinner continues animating.
• Users need to decide whether to wait, retry, cancel, use stale data, leave the flow, or contact support.
• The system can detect elapsed time, retry count, request state, cached data age, or a support reference but does not surface it.

Selection Rules

• Flag this anti-pattern when a spinner or busy overlay can continue without a timeout, elapsed status, retry, cancel, fallback, or failure state.
• Use a short indeterminate spinner only for brief waits where completion is expected and the affected action or region is clearly named.
• Use loading skeleton when predictable content structure is pending and will resolve to content, empty, or error within a bounded path.
• Use a determinate progress indicator, step status, or job queue state when the system can expose percent, stages, item counts, or position.
• Use error state when the operation has failed, timed out, lost authorization, or reached a retry limit that requires user recovery.
• Offer cached data, background continuation, cancellation, or support escalation when the user should not be forced to watch an unknown wait.

Required States

• Initial pending state that names the operation and affected object.
• Extended-wait state after a defined threshold with elapsed context or reason for delay.
• Timed-out or still-working state with retry, cancel, cached fallback, or background continuation.
• Recovered state after the data, save, import, or report resolves.
• Failed state with persistent recovery and support escalation when retry cannot complete.
• Cancelled or leave-safely state when users can stop waiting without losing work.

Interaction Contract

• The loading state is tied to a specific region, action, or object instead of freezing the entire interface without explanation.
• The spinner does not remain the only status after the wait threshold; the UI changes copy, available actions, or state.
• Retry, cancel, cached view, background processing, or support controls become available without requiring a page refresh.
• User-entered work, filters, selected files, and billing or report context remain visible or recoverable while the operation waits.
• Assistive technology receives concise status changes and is not left in a permanent busy state.
• A second retry does not loop back to the same endless spinner without changing the recovery options.

Implementation Checklist

• Define timeout thresholds per operation type, such as short inline saves, medium data loads, long imports, and background jobs.
• Pair every spinner with text that names what is loading or processing.
• After the threshold, replace or augment the spinner with elapsed status and actions such as Retry, Cancel, Use cached values, Keep working, or Contact support.
• Switch to determinate progress when the backend can expose stages, percent, item counts, or queue position.
• Preserve the affected task context so users can continue, retry, or report the problem without reconstructing their work.
• Instrument stalled requests and retry outcomes so the UI timeout is connected to real system state.
• Remove busy or disabled state when loading resolves, fails, is cancelled, or moves to background processing.

Common Generated-UI Mistakes

• Animating a full-page spinner forever after a request times out.
• Replacing a failed API response with a loading state because error handling is missing.
• Disabling the only button with a spinner and no explanation, timeout, or alternate action.
• Showing a skeleton and spinner together while neither resolves to content or error.
• Making users refresh the browser to find out whether a payment, upload, report, or save completed.
• Keeping aria-busy set after the operation has failed or moved to the background.

Critique Questions

• What exact UI state appears after the first wait threshold is crossed?
• Can the user safely leave, cancel, retry, or use cached data without losing context?
• Does the spinner name the operation and affected object, or only imply that something somewhere is happening?
• What prevents a failed request from being represented as loading forever?
• Can keyboard and screen reader users discover the timeout and recovery actions?