fix: Show pending revocation on click (#38184)

## **Description**

This PR improves the user experience when revoking Gator permissions by
adding optimistic UI feedback.

**What is the reason for the change?**

When users clicked the "Revoke" button for a Gator permission, there was
a noticeable delay before the button appeared disabled and showed
"Pending..." text. This created a poor user experience where users might
click multiple times, unsure if their action was registered.

**What is the improvement/solution?**

The solution implements optimistic UI feedback by:
1. Immediately setting a pending state when the revoke button is clicked
2. Disabling the button and displaying "Pending..." text right away
3. Managing the pending state with a 800ms timeout after the revoke
operation completes to prevent visual flashing before the transaction
confirmation window appears
4. Properly cleaning up timeouts on component unmount to prevent memory
leaks
5. Immediately clearing the pending state if an error occurs

The implementation uses local component state (`pendingRevokeClicks`)
combined with the existing global pending revocations selector to
provide a smooth, responsive user experience.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38184?quickstart=1)

## **Changelog**

CHANGELOG entry: Improved responsiveness of revoke button in Gator
permissions by adding immediate UI feedback

## **Manual testing steps**

1. Go to all permissions
2. Find a permission
3. Click revoke -> the button should turn to pending revocation right
away, before the revoke transaction window shows.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/7e111d41-3857-44a0-84ea-7569af0f9e01



### **After**


https://github.com/user-attachments/assets/5c222555-8f0d-4dc5-b70e-247350024cdd


<!-- [screenshots/recordings] -->

## **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/main/.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/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds optimistic pending state for Gator permission revocations,
disabling the button and showing "Pending..." immediately with timeout
cleanup.
> 
> - **UI — Gator Permissions**
>   - `review-permissions/review-gator-permissions-page.tsx`:
> - Introduces local pending state via `pendingRevokeClicks` (Set) and
`revokeTimeoutsRef` (Map) with unmount cleanup.
> - Updates `handleRevokeClick` to optimistically set pending, call
`revokeGatorPermission`, then clear after 800ms; clears immediately on
error.
> - Passes `hasRevokeBeenClicked` to children; simplifies empty-state
check to `gatorPermissions.length`.
>   - `components/review-gator-permission-item.tsx`:
> - Adds optional `hasRevokeBeenClicked` prop and integrates it into
`isPendingRevocation` alongside global `pendingRevocations`.
> - Disables Revoke button and switches label to pending when either
local or global pending is true.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
f675d88. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: MoMannn

ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.tsx

@@ -73,6 +73,11 @@ type ReviewGatorPermissionItemProps = {
    * The function to call when the revoke is clicked
    */
   onRevokeClick: () => void;
+
+  /**
+   * Whether this permission has a pending revoke click (temporary UI state)
+   */
+  hasRevokeBeenClicked?: boolean;
 };
 
 type PermissionExpandedDetails = Record<
@@ -102,6 +107,7 @@ export const ReviewGatorPermissionItem = ({
   networkName,
   gatorPermission,
   onRevokeClick,
+  hasRevokeBeenClicked = false,
 }: ReviewGatorPermissionItemProps) => {
   const t = useI18nContext();
   const { permissionResponse, siteOrigin } = gatorPermission;
@@ -151,10 +157,13 @@ export const ReviewGatorPermissionItem = ({
   }, [tokensByChain, chainId, tokenAddress, nativeTokenMetadata]);
 
   const isPendingRevocation = useMemo(() => {
-    return pendingRevocations.some(
-      (revocation) => revocation.permissionContext === permissionContext,
+    return (
+      hasRevokeBeenClicked ||
+      pendingRevocations.some(
+        (revocation) => revocation.permissionContext === permissionContext,
+      )
     );
-  }, [pendingRevocations, permissionContext]);
+  }, [pendingRevocations, permissionContext, hasRevokeBeenClicked]);
 
   /**
    * Handles the click event for the expand/collapse button

ui/components/multichain/pages/gator-permissions/review-permissions/review-gator-permissions-page.tsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate, useParams } from 'react-router-dom-v5-compat';
 import { useSelector } from 'react-redux';
 import { Hex } from '@metamask/utils';
@@ -65,7 +71,38 @@ export const ReviewGatorPermissionsPage = ({
   const [, evmNetworks] = useSelector(
     getMultichainNetworkConfigurationsByChainId,
   );
-  const [totalGatorPermissions, setTotalGatorPermissions] = useState(0);
+  const [pendingRevokeClicks, setPendingRevokeClicks] = useState<Set<string>>(
+    new Set(),
+  );
+  const revokeTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
+    new Map(),
+  );
+
+  // Cleanup all pending timeouts on unmount
+  useEffect(() => {
+    const timeouts = revokeTimeoutsRef.current;
+    return () => {
+      timeouts.forEach((timeout) => clearTimeout(timeout));
+      timeouts.clear();
+    };
+  }, []);
+
+  // Helper functions for managing pending state
+  const addPendingContext = useCallback((context: string) => {
+    setPendingRevokeClicks((prev) => {
+      const next = new Set(prev);
+      next.add(context);
+      return next;
+    });
+  }, []);
+
+  const removePendingContext = useCallback((context: string) => {
+    setPendingRevokeClicks((prev) => {
+      const next = new Set(prev);
+      next.delete(context);
+      return next;
+    });
+  }, []);
 
   const networkName: string = useMemo(() => {
     const networkNameKey = extractNetworkName(evmNetworks, chainId as Hex);
@@ -100,39 +137,60 @@ export const ReviewGatorPermissionsPage = ({
     chainId: chainId as Hex,
   });
 
-  useEffect(() => {
-    setTotalGatorPermissions(gatorPermissions.length);
-  }, [chainId, gatorPermissions]);
+  const handleRevokeClick = useCallback(
+    async (
+      permission: StoredGatorPermissionSanitized<
+        Signer,
+        PermissionTypesWithCustom
+      >,
+    ) => {
+      const { context } = permission.permissionResponse;
 
-  const handleRevokeClick = async (
-    permission: StoredGatorPermissionSanitized<
-      Signer,
-      PermissionTypesWithCustom
-    >,
-  ) => {
-    try {
-      await revokeGatorPermission(permission);
-    } catch (error) {
-      console.error('Error revoking gator permission:', error);
-    }
-  };
+      // Set pending state immediately to disable button and show "Pending..." text
+      addPendingContext(context);
+
+      try {
+        await revokeGatorPermission(permission);
+
+        // Delay clearing to prevent visual flash before transaction window shows
+        const timeoutId = setTimeout(() => {
+          removePendingContext(context);
+          revokeTimeoutsRef.current.delete(context);
+        }, 800); // 800ms delay to prevent visual flash before transaction window shows
+
+        revokeTimeoutsRef.current.set(context, timeoutId);
+      } catch (error) {
+        console.error('Error revoking gator permission:', error);
+
+        // Clean up any pending timeout
+        const existingTimeout = revokeTimeoutsRef.current.get(context);
+        clearTimeout(existingTimeout);
+        revokeTimeoutsRef.current.delete(context);
+
+        // Clear pending state immediately on error
+        removePendingContext(context);
+      }
+    },
+    [revokeGatorPermission, addPendingContext, removePendingContext],
+  );
 
   const renderGatorPermissions = (
     permissions: StoredGatorPermissionSanitized<
       Signer,
       PermissionTypesWithCustom
     >[],
   ) =>
-    permissions.map((permission) => {
-      return (
-        <ReviewGatorPermissionItem
-          key={`${permission.siteOrigin}-${permission.permissionResponse.context}`}
-          networkName={networkName}
-          gatorPermission={permission}
-          onRevokeClick={() => handleRevokeClick(permission)}
-        />
-      );
-    });
+    permissions.map((permission) => (
+      <ReviewGatorPermissionItem
+        key={`${permission.siteOrigin}-${permission.permissionResponse.context}`}
+        networkName={networkName}
+        gatorPermission={permission}
+        onRevokeClick={() => handleRevokeClick(permission)}
+        hasRevokeBeenClicked={pendingRevokeClicks.has(
+          permission.permissionResponse.context,
+        )}
+      />
+    ));
 
   return (
     <Page
@@ -162,7 +220,7 @@ export const ReviewGatorPermissionsPage = ({
         </Text>
       </Header>
       <Content padding={0}>
-        {totalGatorPermissions > 0 ? (
+        {gatorPermissions.length > 0 ? (
           renderGatorPermissions(gatorPermissions)
         ) : (
           <Box