chore: Add Loading state to delete account modals

src/accounts/DeleteFreeAccountOverlay.tsx

@@ -43,6 +43,7 @@ export const DeleteFreeAccountOverlay: FC = () => {
     useContext(DeleteFreeAccountContext)
   const {user, account} = useSelector(selectCurrentIdentity)
   const org = useSelector(selectCurrentOrg)
+  const [isLoading, setIsLoading] = useState(false)
 
   const handleClose = () => {
     const payload = {
@@ -63,6 +64,8 @@ export const DeleteFreeAccountOverlay: FC = () => {
   }, [hasAgreedToTerms, reason])
 
   const handleDeleteAccount = async () => {
+    setIsLoading(true)
+
     const payload = {
       org: org.id,
       tier: account.type,
@@ -83,6 +86,8 @@ export const DeleteFreeAccountOverlay: FC = () => {
       window.location.href = getRedirectLocation()
     } catch {
       dispatch(notify(accountSelfDeletionFailed()))
+    } finally {
+      setIsLoading(false)
     }
   }
 
@@ -144,9 +149,15 @@ export const DeleteFreeAccountOverlay: FC = () => {
             color={ComponentColor.Danger}
             text="Delete Account"
             testID="delete-free-account--button"
-            status={
-              isFormValid ? ComponentStatus.Default : ComponentStatus.Disabled
-            }
+            status={(() => {
+              if (isLoading) {
+                return ComponentStatus.Loading
+              } else if (!isFormValid) {
+                return ComponentStatus.Disabled
+              } else {
+                return ComponentStatus.Default
+              }
+            })()}
             onClick={handleDeleteAccount}
           />
         </Overlay.Footer>

src/operator/account/DeleteAccountOverlay.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react'
+import React, {FC, useContext, useState} from 'react'
 import {
   Overlay,
   Gradients,
@@ -7,6 +7,7 @@ import {
   IconFont,
   ButtonBase,
   ButtonShape,
+  ComponentStatus,
 } from '@influxdata/clockface'
 import {AccountContext} from 'src/operator/context/account'
 
@@ -18,13 +19,17 @@ const DeleteAccountOverlay: FC = () => {
     setDeleteOverlayVisible,
     deleteOverlayVisible,
   } = useContext(AccountContext)
+  const [isLoading, setIsLoading] = useState(false)
 
   const deleteAccount = () => {
     if (account?.deletable) {
+      setIsLoading(true)
       try {
         handleDeleteAccount()
       } catch (e) {
         setDeleteOverlayVisible(false)
+      } finally {
+        setIsLoading(false)
       }
     }
   }
@@ -63,6 +68,9 @@ const DeleteAccountOverlay: FC = () => {
             color={ComponentColor.Danger}
             shape={ButtonShape.Default}
             onClick={deleteAccount}
+            status={
+              isLoading ? ComponentStatus.Loading : ComponentStatus.Default
+            }
             testID="delete-account--confirmation-button"
           >
             I understand, delete account.