The donation page tracks which tier is processing, not whether the page is busy

The DonationTiers component renders five preset amounts and one custom field. The loading state is not a boolean. It is a number or null. When a visitor clicks the twenty-five pound tier, loading becomes 3 — the index of that button in the tiers array. When they type a custom amount and click Donate, loading becomes negative one. When nothing is processing, loading is null. Every tier button checks disabled against loading not equal to null. If any donation is in progress, all six buttons disable. But only the active button changes its label. The tier at index 3 shows three dots where its price would be. The other four still show their prices — they are greyed out, not rewritten. The custom Donate button follows the same pattern. If loading equals negative one, it shows three dots. Otherwise it shows Donate. This matters because replacing every label with a spinner would lose the prices, and a user who second-guesses their choice mid-click would no longer see the alternatives. The custom amount field validates twice — once for minimum and once for courtesy. Below one pound, the error reads Minimum donation is one pound. Above ten thousand, the error reads That is very generous, please contact me directly for large donations. The validation runs client-side with parseFloat before the fetch fires. The amount converts from pounds to pence with Math.round to avoid floating-point drift — 25.50 becomes 2550, not 2549.9999. The donate API receives amountPence as an integer and passes it straight to Stripe price_data as unit_amount. No product records exist in Stripe. Every donation creates a one-off Checkout Session with an inline product name built from the amount — Donation followed by a pound sign and the amount formatted to two decimal places. One component, one number-or-null state, six buttons, and the loading indicator lives where the information was rather than on top of it.