fix: alert & reports active toggle optimistic update (#20402)

superset-frontend/src/views/CRUD/alert/AlertList.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { t, SupersetClient, makeApi, styled } from '@superset-ui/core';
 import moment from 'moment';
@@ -109,6 +109,7 @@ function AlertList({
     },
     hasPerm,
     fetchData,
+    setResourceCollection,
     refreshData,
     toggleBulkSelect,
   } = useListViewResource<AlertObject>(
@@ -188,14 +189,32 @@ function AlertList({
 
   const initialSort = [{ id: 'name', desc: true }];
 
-  const toggleActive = (data: AlertObject, checked: boolean) => {
-    if (data && data.id) {
-      const update_id = data.id;
-      updateResource(update_id, { active: checked }).then(() => {
-        refreshData();
-      });
-    }
-  };
+  const toggleActive = useCallback(
+    (data: AlertObject, checked: boolean) => {
+      if (data && data.id) {
+        const update_id = data.id;
+        const original = [...alerts];
+
+        setResourceCollection(
+          original.map(alert => {
+            if (alert?.id === data.id) {
+              return {
+                ...alert,
+                active: checked,
+              };
+            }
+
+            return alert;
+          }),
+        );
+
+        updateResource(update_id, { active: checked }, false, false)
+          .then()
+          .catch(() => setResourceCollection(original));
+      }
+    },
+    [alerts, setResourceCollection, updateResource],
+  );
 
   const columns = useMemo(
     () => [
@@ -357,7 +376,7 @@ function AlertList({
         size: 'xl',
       },
     ],
-    [canDelete, canEdit, isReportEnabled],
+    [canDelete, canEdit, isReportEnabled, toggleActive],
   );
 
   const subMenuButtons: SubMenuProps['buttons'] = [];

superset-frontend/src/views/CRUD/hooks.ts

@@ -316,11 +316,13 @@ export function useSingleViewResource<D extends object = any>(
   );
 
   const updateResource = useCallback(
-    (resourceID: number, resource: D, hideToast = false) => {
+    (resourceID: number, resource: D, hideToast = false, setLoading = true) => {
       // Set loading state
-      updateState({
-        loading: true,
-      });
+      if (setLoading) {
+        updateState({
+          loading: true,
+        });
+      }
 
       return SupersetClient.put({
         endpoint: `/api/v1/${resourceName}/${resourceID}`,
@@ -354,11 +356,14 @@ export function useSingleViewResource<D extends object = any>(
           }),
         )
         .finally(() => {
-          updateState({ loading: false });
+          if (setLoading) {
+            updateState({ loading: false });
+          }
         });
     },
     [handleErrorMsg, resourceName, resourceLabel],
   );
+
   const clearError = () =>
     updateState({
       error: null,