Fetching & Displaying Data

How should form submissions be handled to provide optimal user experience?
async function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const submitButton = form.querySelector('button[type="submit"]');
  
  try {
    submitButton.disabled = true;
    submitButton.innerHTML = '<span class="spinner"></span> Submitting...';
    
    const formData = new FormData(form);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData
    });
    
    if (!response.ok) throw new Error('Submission failed');
    
    showSuccess('Form submitted successfully');
    form.reset();
  } catch (error) {
    showError('Failed to submit form. Please try again.');
  } finally {
    submitButton.disabled = false;
    submitButton.textContent = 'Submit';
  }
}
Next Question (12/20)