Submission — Pending, Success and Failure

<button type="submit" disabled={isSubmitting} aria-busy={isSubmitting}>
  {isSubmitting ? 'Saving…' : 'Save changes'}
</button>

// Disabled alone is not enough feedback. A label change or spinner
// tells the user the click registered.

// Reserve the width so the button does not resize between the two
// labels, which reads as a jitter:
<span className="min-w-[8ch] inline-block text-center">…</span>

// Prevent the other paths to a double submit:
//   - Enter in a text field submits the form too
//   - a second click during the request
// Both are covered by disabling on isSubmitting, provided the flag
// is set before the await:
setSubmitting(true)
try { await save(values) } finally { setSubmitting(false) }

// For anything that creates a record, an idempotency key makes the
// duplicate harmless even if one slips through.

async function onSubmit(values) {
  const created = await createProblem(values)

  toast.success('Problem published')            // it happened
  queryClient.invalidateQueries({ queryKey: ['problems'] })   // the list updates
  navigate(`/problems/${created.slug}`)         // where next
}

// Pick the pattern from the context:
//   creating something  -> navigate to it
//   editing in place    -> stay, show "Saved", reset dirty state
//   a modal             -> close it, and update the list behind
//   a multi-step flow   -> advance to the next step

// reset(values) after an edit clears isDirty, which is what makes
// the unsaved-changes warning stop firing:
reset(created)

// A toast that vanishes in two seconds is not enough on its own for
// something important — reflect the change in the UI as well.

// 1. NEVER clear the form. The user's input is theirs.
// 2. Say which field, if the server told you which field.
// 3. Say what to do next.
// 4. Re-enable the button.

catch (err) {
  if (err.status === 422) return applyFieldErrors(err)
  if (err.status === 409) return setError('root', {
    message: 'Someone else changed this while you were editing. Reload to see their version.',
  })
  if (err.status === 429) return setError('root', {
    message: 'Too many attempts. Try again in a minute.',
  })
  setError('root', { message: 'We could not save that. Please try again.' })
  reportError(err)                     // the detail goes to logging
}

// Move focus to the error so it is announced, not just displayed:
useEffect(() => {
  if (errors.root) rootErrorRef.current?.focus()
}, [errors.root])

// Draft protection for long forms — a lost essay is unforgivable
useEffect(() => {
  const id = setTimeout(() => localStorage.setItem(key, JSON.stringify(values)), 1000)
  return () => clearTimeout(id)
}, [values])