From 1403fe9c8a291c0cd2e4e913a3ea7b13be9425ec Mon Sep 17 00:00:00 2001
From: Joel Abshier <jabshier@influxdata.com>
Date: Fri, 9 May 2025 13:38:30 -0500
Subject: [PATCH 1/2] chore: Add `Loading` state to delete account modals

---
 src/accounts/DeleteFreeAccountOverlay.tsx     | 11 ++++++++++-
 src/operator/account/DeleteAccountOverlay.tsx | 10 +++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/accounts/DeleteFreeAccountOverlay.tsx b/src/accounts/DeleteFreeAccountOverlay.tsx
index 1c4691b82b..ef7824e384 100644
--- a/src/accounts/DeleteFreeAccountOverlay.tsx
+++ b/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)
     }
   }
 
@@ -145,7 +150,11 @@ export const DeleteFreeAccountOverlay: FC = () => {
             text="Delete Account"
             testID="delete-free-account--button"
             status={
-              isFormValid ? ComponentStatus.Default : ComponentStatus.Disabled
+              isLoading
+                ? ComponentStatus.Loading
+                : isFormValid
+                ? ComponentStatus.Default
+                : ComponentStatus.Disabled
             }
             onClick={handleDeleteAccount}
           />
diff --git a/src/operator/account/DeleteAccountOverlay.tsx b/src/operator/account/DeleteAccountOverlay.tsx
index fb333a580f..d45cd1e1e7 100644
--- a/src/operator/account/DeleteAccountOverlay.tsx
+++ b/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.

From 63e297fb115a04118da3161dd1b18111ce8b13c9 Mon Sep 17 00:00:00 2001
From: Joel Abshier <jabshier@influxdata.com>
Date: Fri, 9 May 2025 14:23:38 -0500
Subject: [PATCH 2/2] chore: remove nested ternary

---
 src/accounts/DeleteFreeAccountOverlay.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/accounts/DeleteFreeAccountOverlay.tsx b/src/accounts/DeleteFreeAccountOverlay.tsx
index ef7824e384..24a2a4be5f 100644
--- a/src/accounts/DeleteFreeAccountOverlay.tsx
+++ b/src/accounts/DeleteFreeAccountOverlay.tsx
@@ -149,13 +149,15 @@ export const DeleteFreeAccountOverlay: FC = () => {
             color={ComponentColor.Danger}
             text="Delete Account"
             testID="delete-free-account--button"
-            status={
-              isLoading
-                ? ComponentStatus.Loading
-                : 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>