feat(feedback): Disable Feedback submit & cancel buttons while submitting (#15408)

While submitting feedback the Submit and Cancel buttons previously
remained active. So you could smash that submit many times and submit
many duplicate feedbacks.

This disabled the buttons while the network request is being fired off.

The disabled buttons are slightly grayed out by the browser. So it
depends on what custom color you've picked:

![SCR-20250213-kmpm](https://github.com/user-attachments/assets/883d4098-3f7f-4167-9506-4ff84b4e7e25)

Author: ryan953

packages/feedback/src/modal/components/Dialog.css.ts

@@ -115,6 +115,12 @@ const FORM = `
   flex: 1 0;
 }
 
+.form fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
 .form__right {
   flex: 0 0 auto;
   display: flex;

packages/feedback/src/modal/components/Form.tsx

@@ -61,6 +61,7 @@ export function Form({
     submitButtonLabel,
     isRequiredLabel,
   } = options;
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // TODO: set a ref on the form, and whenever an input changes call processForm() and setError()
   const [error, setError] = useState<null | string>(null);
 
@@ -97,6 +98,7 @@ export function Form({
 
   const handleSubmit = useCallback(
     async (e: JSX.TargetedSubmitEvent<HTMLFormElement>) => {
+      setIsSubmitting(true);
       try {
         e.preventDefault();
         if (!(e.target instanceof HTMLFormElement)) {
@@ -133,8 +135,8 @@ export function Form({
           setError(error as string);
           onSubmitError(error as Error);
         }
-      } catch {
-        // pass
+      } finally {
+        setIsSubmitting(false);
       }
     },
     [screenshotInput && showScreenshotInput, onSubmitSuccess, onSubmitError],
@@ -146,7 +148,7 @@ export function Form({
         <ScreenshotInputComponent onError={onScreenshotError} />
       ) : null}
 
-      <div class="form__right" data-sentry-feedback={true}>
+      <fieldset class="form__right" data-sentry-feedback={true} disabled={isSubmitting}>
         <div class="form__top">
           {error ? <div class="form__error-container">{error}</div> : null}
 
@@ -201,6 +203,7 @@ export function Form({
             <label for="screenshot" class="form__label">
               <button
                 class="btn btn--default"
+                disabled={isSubmitting}
                 type="button"
                 onClick={() => {
                   setScreenshotError(null);
@@ -214,14 +217,14 @@ export function Form({
           ) : null}
         </div>
         <div class="btn-group">
-          <button class="btn btn--primary" type="submit">
+          <button class="btn btn--primary" disabled={isSubmitting} type="submit">
             {submitButtonLabel}
           </button>
-          <button class="btn btn--default" type="button" onClick={onFormClose}>
+          <button class="btn btn--default" disabled={isSubmitting} type="button" onClick={onFormClose}>
             {cancelButtonLabel}
           </button>
         </div>
-      </div>
+      </fieldset>
     </form>
   );
 }