Status & loading

Result Page

Q: How do people describe a Result Page in plain words?

the full screen with a big green check after I submit payment done — that page with the checkmark and order number 404-style full page with an illustration and a way back

Q: How do I implement a Result Page?

After payment, navigate to a dedicated result page (own route so refresh is safe): large status icon, verdict title (“Payment successful”), order number and ETA as subtitle, at least one primary exit. Getting here must replace the form route in history—not push—so Back cannot resubmit.

A full screen that states the final outcome of a heavy action and offers a clear next step.

Also known as success page · completion page · status page

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Result Page".

After payment, navigate to a dedicated result page (own route so refresh is safe): large status icon, verdict title (“Payment successful”), order number and ETA as subtitle, at least one primary exit. Getting here must replace the form route in history—not push—so Back cannot resubmit.

Anatomy:
- status icon: Large check, cross, or 404 art—sets the mood at a glance.
- title: Verdict first: “Payment successful”.
- subtitle: Order id, ETA, or other proof details.
- actions / extra: At least one primary exit: View order, Back home. Dead ends are the failure mode.

Preferred API / pattern: `dedicated result route component`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Result page with no exit button
○Avoid: history.push into the result
○Avoid: Lightweight success that jumps a whole route
○Avoid: Success page without receipt detail

In plain wordsHow people search for it

“the full screen with a big green check after I submit”“payment done — that page with the checkmark and order number”“404-style full page with an illustration and a way back”

AnatomyOpen for part names

status icon: Large check, cross, or 404 art—sets the mood at a glance.
title: Verdict first: “Payment successful”.
subtitle: Order id, ETA, or other proof details.
actions / extra: At least one primary exit: View order, Back home. Dead ends are the failure mode.

How to write itOpen for stack patterns

Web (HTML/CSS)semantic <section> on its own route

React + Tailwind + shadcn/uidedicated result route component

SwiftUIfull-screen confirmation view

Ant Design<Result status="success|error|404" extra />

Notes

Weight decides toast vs result page: rename success is a toast; payment, submit-for-review, or account deletion deserve a full page for certainty, receipt data, and a safe exit. Worst bug is a dead end—no buttons, only browser Back, which may resubmit. 404/403/500 pages are result pages too; Ant Design Result ships those statuses.

Common mistakesHumans and models trip here

Result page with no exit button: users hit browser Back and resubmit the form.
history.push into the result: Back returns to the already-submitted form—use replace.
Lightweight success that jumps a whole route: avatar save is a toast, not a page.
Success page without receipt detail: no order id, no ETA—users hunt the order list to verify.

More failure symptoms on AI broke it.

Related patterns

Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.

Spotted a wrong name or missing pattern?

Message on X