add loading state to Experience switches (#5529)

CHANGELOG.md

@@ -21,13 +21,14 @@ The types of changes are:
 
 
 
-## [Unreleased](https://github.com/ethyca/fides/compare/2.49.1...2.50.0)
+## [2.50.0](https://github.com/ethyca/fides/compare/2.49.1...2.50.0)
 
 ### Added
 - Added namespace support for Snowflake [#5486](https://github.com/ethyca/fides/pull/5486)
 - Added support for field-level masking overrides [#5446](https://github.com/ethyca/fides/pull/5446)
 - Added BigQuery Enterprise access request integration test [#5504](https://github.com/ethyca/fides/pull/5504)
 - Added MD5 email hashing for Segment's Right to Forget endpoint requests [#5514](https://github.com/ethyca/fides/pull/5514)
+- Added loading state to the toggle switches on the Privacy experiences page [#5529](https://github.com/ethyca/fides/pull/5529)
 
 ### Changed
 - Allow hiding systems via a `hidden` parameter and add two flags on the `/system` api endpoint; `show_hidden` and `dnd_relevant`, to display only systems with integrations [#5484](https://github.com/ethyca/fides/pull/5484)

clients/admin-ui/src/features/privacy-experience/cells.tsx

@@ -1,5 +1,5 @@
 import { CellContext } from "@tanstack/react-table";
-import React from "react";
+import React, { useState } from "react";
 
 import { DefaultCell, EnableCell } from "~/features/common/table/v2/cells";
 import { COMPONENT_MAP } from "~/features/privacy-experience/constants";
@@ -17,12 +17,17 @@ export const EnablePrivacyExperienceCell = ({
 }: CellContext<ExperienceConfigListViewResponse, boolean | undefined>) => {
   const [limitedPatchExperienceMutationTrigger] =
     useLimitedPatchExperienceConfigMutation();
+  const [isLoading, setIsLoading] = useState(false);
 
-  const onToggle = async (toggle: boolean) =>
-    limitedPatchExperienceMutationTrigger({
+  const onToggle = async (toggle: boolean) => {
+    setIsLoading(true);
+    const response = await limitedPatchExperienceMutationTrigger({
       id: row.original.id,
       disabled: !toggle,
     });
+    setIsLoading(false);
+    return response;
+  };
 
   const disabled = getValue()!;
   const { regions } = row.original;
@@ -41,6 +46,7 @@ export const EnablePrivacyExperienceCell = ({
       onToggle={onToggle}
       title={title}
       message={message}
+      loading={isLoading}
     />
   );
 };