pc/modals: Disable submit buttons on when Formik isSubmitting

CHANGELOG.md

@@ -41,7 +41,11 @@ The types of changes are:
 
 * Home screen header scaling and responsiveness issues [#2200](https://github.com/ethyca/fides/pull/2277)
 * Added a feature flag for the recent dataset classification UX changes [#2335](https://github.com/ethyca/fides/pull/2335)
-* Privacy Center identity inputs validate even when they are optional. [#2308](https://github.com/ethyca/fides/pull/2308)
+* Privacy Center 
+  * Identity inputs validate even when they are optional. [#2308](https://github.com/ethyca/fides/pull/2308)
+  * Submit buttons show loading state and disable while submitting. [#2401](https://github.com/ethyca/fides/pull/2401)
+  * Phone inputs no longer request country SVGs from external domain. [#2378](https://github.com/ethyca/fides/pull/2378)
+  * Input validation errors no longer change the height of modals. [#2379](https://github.com/ethyca/fides/pull/2379)
 * Patch masking strategies to better handle null and non-string inputs [#2307](https://github.com/ethyca/fides/pull/2377)
 
 ### Security

clients/privacy-center/components/modals/VerificationForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import {
   Button,
   chakra,
@@ -40,7 +40,6 @@ const useVerificationForm = ({
   verificationType: VerificationType;
   successHandler: () => void;
 }) => {
-  const [isLoading, setIsLoading] = useState(false);
   const toast = useToast();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [verificationCode, setVerificationCode] = useLocalStorage(
@@ -56,8 +55,6 @@ const useVerificationForm = ({
       code: "",
     },
     onSubmit: async (values) => {
-      setIsLoading(true);
-
       const body = {
         code: values.code,
       };
@@ -123,7 +120,7 @@ const useVerificationForm = ({
     },
   });
 
-  return { ...formik, isLoading, resetVerificationProcess };
+  return { ...formik, resetVerificationProcess };
 };
 
 type VerificationFormProps = {
@@ -153,6 +150,7 @@ const VerificationForm: React.FC<VerificationFormProps> = ({
     touched,
     values,
     isValid,
+    isSubmitting,
     dirty,
     resetForm,
     resetVerificationProcess,
@@ -209,7 +207,8 @@ const VerificationForm: React.FC<VerificationFormProps> = ({
                 _hover={{ bg: "primary.400" }}
                 _active={{ bg: "primary.500" }}
                 colorScheme="primary"
-                disabled={!(isValid && dirty)}
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting || !(isValid && dirty)}
                 size="sm"
               >
                 Submit code

clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import {
   Button,
   chakra,
@@ -42,16 +42,13 @@ const useConsentRequestForm = ({
 }) => {
   const identityInputs =
     config.consent?.identity_inputs ?? defaultIdentityInput;
-  const [isLoading, setIsLoading] = useState(false);
   const toast = useToast();
   const formik = useFormik({
     initialValues: {
       email: "",
       phone: "",
     },
     onSubmit: async (values) => {
-      setIsLoading(true);
-
       const body = {
         email: values.email,
         phone_number: values.phone,
@@ -116,7 +113,7 @@ const useConsentRequestForm = ({
     }),
   });
 
-  return { ...formik, isLoading, identityInputs };
+  return { ...formik, identityInputs };
 };
 
 type ConsentRequestFormProps = {
@@ -144,6 +141,7 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
     touched,
     values,
     isValid,
+    isSubmitting,
     dirty,
     setFieldValue,
     resetForm,
@@ -225,7 +223,8 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
             _hover={{ bg: "primary.400" }}
             _active={{ bg: "primary.500" }}
             colorScheme="primary"
-            disabled={!(isValid && dirty)}
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !(isValid && dirty)}
             size="sm"
           >
             Continue

clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx

@@ -11,7 +11,7 @@ import {
   Text,
   useToast,
 } from "@fidesui/react";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { Headers } from "headers-polyfill";
@@ -44,7 +44,6 @@ const usePrivacyRequestForm = ({
   isVerificationRequired: boolean;
 }) => {
   const identityInputs = action?.identity_inputs ?? defaultIdentityInput;
-  const [isLoading, setIsLoading] = useState(false);
   const toast = useToast();
   const formik = useFormik({
     initialValues: {
@@ -58,8 +57,6 @@ const usePrivacyRequestForm = ({
         return;
       }
 
-      setIsLoading(true);
-
       const body = [
         {
           identity: {
@@ -143,7 +140,7 @@ const usePrivacyRequestForm = ({
     }),
   });
 
-  return { ...formik, isLoading, identityInputs };
+  return { ...formik, identityInputs };
 };
 
 type PrivacyRequestFormProps = {
@@ -176,6 +173,7 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
     touched,
     values,
     isValid,
+    isSubmitting,
     dirty,
     resetForm,
     identityInputs,
@@ -276,7 +274,8 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
             _hover={{ bg: "primary.400" }}
             _active={{ bg: "primary.500" }}
             colorScheme="primary"
-            disabled={!(isValid && dirty)}
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !(isValid && dirty)}
             size="sm"
           >
             Continue