fix: (cherry-pick) check if the notifications started flow is running (…

…#27038) (#27056)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR adds a check to the modal for enabling notifications. If the
enabling process is in progress, closing the modal does not trigger the
“dismissed” event.

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27038?quickstart=1)

## **Related issues**

N/A

## **Manual testing steps**

N/A

## **Screenshots/Recordings**

N/A

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx

@@ -51,14 +51,14 @@ export default function TurnOnMetamaskNotifications() {
   );
   const isProfileSyncingEnabled = useSelector(selectIsProfileSyncingEnabled);
 
-  const [buttonState, setButtonState] = useState<boolean>(
+  const [isLoading, setIsLoading] = useState<boolean>(
     isUpdatingMetamaskNotifications,
   );
 
   const { createNotifications, error } = useCreateNotifications();
 
   const handleTurnOnNotifications = async () => {
-    setButtonState(true);
+    setIsLoading(true);
     await createNotifications();
     trackEvent({
       category: MetaMetricsEventCategory.NotificationsActivationFlow,
@@ -72,13 +72,18 @@ export default function TurnOnMetamaskNotifications() {
 
   const handleHideModal = () => {
     hideModal();
-    trackEvent({
-      category: MetaMetricsEventCategory.NotificationsActivationFlow,
-      event: MetaMetricsEventName.NotificationsActivated,
-      properties: {
-        is_profile_syncing_enabled: isProfileSyncingEnabled,
-        action_type: 'dismissed',
-      },
+    setIsLoading((prevLoadingState) => {
+      if (!prevLoadingState) {
+        trackEvent({
+          category: MetaMetricsEventCategory.NotificationsActivationFlow,
+          event: MetaMetricsEventName.NotificationsActivated,
+          properties: {
+            is_profile_syncing_enabled: isProfileSyncingEnabled,
+            action_type: 'dismissed',
+          },
+        });
+      }
+      return prevLoadingState;
     });
   };
 
@@ -149,8 +154,8 @@ export default function TurnOnMetamaskNotifications() {
           }}
           submitButtonProps={{
             children: t('turnOnMetamaskNotificationsButton'),
-            loading: buttonState,
-            disabled: buttonState,
+            loading: isLoading,
+            disabled: isLoading,
             'data-testid': 'turn-on-notifications-button',
           }}
         />