Disable checkout button while the order is pending
Trail-Session: claude:d02659b5-ec03-4d34-b363-1f0767df0d19
Trail-Link: http://localhost:8787/repos/web-app/session/d02659b5-ec03-4d34-b363-1f0767df0d19
Lleo committed 7 days ago · maincommit dc7bd6474afaf2af6a27febdf890690c3527536e
Agent sessions behind this commit1
On slow 3G the checkout button flickers and some people manage to place the order twice. Fix it.
Conversationclaude:d02659b5-ec03-4d34-b363-1f0767df0d19 · transcript lines 0–10
Showing 1 changed file with 14 additions and 3 deletions.
src/components/CheckoutButton.tsx+14 −3
@@ -1,11 +1,22 @@
export function CheckoutButton({ cart }: { cart: Cart }) {
const [loading, setLoading] = useState(false);
+ const inFlight = useRef(false); // two quick taps both see loading=false
async function submit() {
+ if (inFlight.current) return;
+ inFlight.current = true;
setLoading(true);
- await placeOrder(cart);
- setLoading(false);
+ try {
+ await placeOrder(cart);
+ } finally {
+ inFlight.current = false;
+ setLoading(false);
+ }
}
- return <button onClick={submit}>{loading ? <Spinner /> : "Place order"}</button>;
+ return (
+ <button onClick={submit} disabled={loading} aria-busy={loading} style={{ minWidth: 140 }}>
+ {loading ? <Spinner /> : "Place order"}
+ </button>
+ );
}