Read pending state in child components with useFormStatus

A reusable submit button should not need a loading prop from every form that uses it. useFormStatus from react-dom reads the status of the parent form, including pending, so the button can disable itself and change its label.

Disabling the button while pending also prevents double submits.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>;
}