# Loading states are shown during async setup operations

- **Pattern:** `ab-002364` (`saas-onboarding.activation.loading-states-during-setup`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002364
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002364)

## Why it matters

A submit button with no loading state invites double-clicks that create duplicate accounts, double-charge users, or race against each other to corrupt state. A post-signup redirect that shows a blank white screen for 1-2 seconds leaves the user wondering whether something broke and occasionally triggers a browser back button press that aborts the flow. The user-experience taxon flags both as foundational: any asynchronous operation without visible feedback degrades perceived reliability and invites user behavior that causes real bugs.

## Severity rationale

Low because the flows still complete, but double-submit races and blank screens erode trust and occasionally produce duplicate-account bugs.

## Remediation

Disable submit buttons and swap their label while a submission is in flight, and add a `loading.tsx` file for any async route that can render blank on transition. Edit `src/app/(auth)/signup/page.tsx` to gate the button on an `isPending` flag, and create `src/app/(auth)/loading.tsx` with a spinner.

```tsx
<Button type="submit" disabled={isPending} className="w-full h-11">
  {isPending ? 'Creating account...' : 'Create account'}
</Button>
```

## Detection

- **ID:** `loading-states-during-setup`
- **Severity:** `low`
- **What to look for:** Count all async operations in the onboarding flow: form submission, OAuth redirect, account creation API calls, initial data loading. For each, classify whether a loading state is rendered. Report the ratio of operations with loading states.
- **Pass criteria:** 100% of async operations during onboarding have a visible loading indicator. The submit button is disabled during form submission to prevent double-submissions. Any async data fetch has a skeleton or spinner. No blank screen exceeds 500ms without a loading indicator.
- **Fail criteria:** The signup form submit button remains active and shows no loading state during submission (allowing double-clicks that create duplicate accounts); the post-signup redirect shows a blank screen for more than 500ms with no loading indicator.
- **Skip (N/A) when:** No async operations exist in the onboarding flow (static site with no backend).
- **Detail on fail:** `"Signup form submit button shows no loading state and remains clickable during submission. Post-OAuth redirect shows blank white screen for 1-2 seconds with no spinner or skeleton."`
- **Remediation:** In your signup form at `src/app/(auth)/signup/page.tsx`:

  ```tsx
  <Button type="submit" disabled={isPending} className="w-full h-11">
    {isPending ? 'Creating account...' : 'Create account'}
  </Button>
  ```

  For page transitions, add `src/app/(auth)/loading.tsx` with a spinner component.

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-002364