status card

Status Card

A passive in-screen card that surfaces async state: “we’re waiting”, “we got the thing back”. Pulses while waiting, settles green when resolved. Replaces an [[inline-alert]] once the user has taken the action and is now just monitoring.

When to use

• After the user has triggered an external request (ops approval, payment confirmation, audit log) and is waiting on it
• The state is observable but not actionable from this screen — they’re watching, not deciding
• Resolution will unlock continuation (a CTA button appears below the card)

Anatomy

┌──────────────────────────────────────────┐
│ ⊙   Awaiting Ops              #STN-0421  │   ← waiting state
│     Sent to HQ · avg 2 min               │
│     [ Park swap · handle next rider ]    │   ← optional park-row
└──────────────────────────────────────────┘

┌──────────────────────────────────────────┐   ← approved state (green tint)
│ ✓   Approved by Tolu (Ops)    #STN-0421  │
│     "Driver has emergency clearance"     │
└──────────────────────────────────────────┘

• Surface (waiting): var(--white), var(--sh-card) shadow, no border, 14px radius, 14px padding.
• Surface (approved): var(--g-3) background, no border, otherwise identical.
• Pulse: 32px circle, var(--blue2) background (waiting) or var(--g-primary) (approved). Inner core: 12px circle, var(--blue9) (waiting) or check icon (approved).
• Waiting pulse rings: two pseudo-elements (::before, ::after) with 2px solid var(--blue-line) border, animating scale(0.8) opacity(1) → scale(2) opacity(0) over 1.6s, 0.8s stagger.
• Title: 14px / 700 var(--grey12). Description: 12px / 400 var(--grey11), 3px top margin.
• Approved title: var(--g-dark). Approved description: var(--g-dark) at 0.85 opacity.
• Request ID: 11px / 600, var(--grey11), tabular-nums, right-aligned, flex-shrink: 0.

Optional park row

A status card can include a footer-row “Park” button that lets the user stash the swap and move on. See [[parked-queue]] for the queue side.

• Button: 1px dashed var(--grey9) border, var(--bg) background, 10px radius, 10px 14px padding, 13px / 600 text, full-width with clock icon. On hover/active, fills to var(--grey12) solid.

Behavior

• Mount in .waiting state. After resolution timer fires (typically 18s for ops/payment, 1.4s for audit log), swap classes to .approved and show the continuation CTA below.
• Resolution may also fire from the [[parked-queue]] return path — same end state.
• Don’t replace [[inline-alert]] with this card until the user has taken the action that initiated the wait. The order is: alert → (action) → status-card → (resolution) → CTA.

Forbidden

• Bordered cards (border: 1px solid var(--g-primary)) — use the green-tinted background alone.
• A .failed variant — failure goes back to an [[inline-alert]] (danger), not a status card.
• Permanent pulse — once resolved, kill the rings, don’t keep them animating.

Reference implementation

See .status-card + .status-card.approved in products/rechaj-swap-app/prototypes/support-cases-v2.html.