Promise Toast

A single toast that tracks an async operation end-to-end — a spinning loading state that resolves in place into a success (or error) state.

Uploading report.pdf

This will only take a moment.

Alerts & Toaststoastnotificationasyncloadingpromise

Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.

Dependencies: lucide-react

Overview

Layout

One toast, content swaps in place on resolution

Color

Neutral spinner while pending → primary on success

Lifetime

No auto-dismiss while pending; times out after resolving

Accessibility

aria-live updates once, on resolution — not every frame