Review

Add loading state to invite form

Users double-clicked the invite button and sent duplicate invites. Disables the button and shows a spinner while the request is in flight.

ReactTier 1frontend

Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.

components/InviteForm.tsx+19-1

12	12		export function InviteForm({ onInvite }: Props) {
13	13		const [email, setEmail] = useState("");
	14	+	const [sending, setSending] = useState(false);
14	15
	16	+	async function handleSubmit(e: React.FormEvent) {
	17	+	e.preventDefault();
	18	+	if (sending) return;
	19	+	setSending(true);
	20	+	try {
	21	+	await onInvite(email);
	22	+	setEmail("");
	23	+	} finally {
	24	+	setSending(false);
	25	+	}
	26	+	}
15	27
16		-	return <button onClick={() => onInvite(email)}>Invite</button>;
	28	+	return (
	29	+	<form onSubmit={handleSubmit}>
	30	+	<button type="submit" disabled={sending}>
	31	+	{sending ? <Spinner /> : "Invite"}
	32	+	</button>
	33	+	</form>
	34	+	);