Add to cart provides immediate visual feedback

Clicking Add to Cart with no visible response leaves the shopper guessing whether the click registered. They click again, then again, producing duplicate line items, or they give up and leave. Silent failures are worse: the network request 500s, the cart stays empty, and the next page load reveals nothing was added. This destroys trust in the checkout flow and is one of the most common causes of cart-abandonment micro-frustration documented in Nielsen Norman usability studies.

Wrap the add-to-cart handler in a loading state, render a disabled button while the request is in flight, and surface both success and error outcomes with a toast. Handle the catch branch explicitly — a console.log does not count as user feedback. Implement this in src/components/AddToCartButton.tsx.

setIsLoading(true)
try { await addToCart(productId); toast.success('Added to cart') }
catch { toast.error('Failed to add item') }
finally { setIsLoading(false) }