From 67a8b9d443f4041018e38b59c6e6182631128a86 Mon Sep 17 00:00:00 2001
From: Daniel Priori <daniel.priori@cognite.com>
Date: Fri, 28 Jun 2024 17:15:34 +0200
Subject: [PATCH] split into different useEffects hooks to let render the
 spinner sooner

---
 .../RevealToolbar/RuleBasedOutputsButton.tsx        | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
index a6814552278..16676599cd3 100644
--- a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
+++ b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -35,9 +35,12 @@ export const RuleBasedOutputsButton = ({
   const { t } = useTranslation();
   const models = use3dModels();
   const cadModels = models.filter((model) => model.type === 'cad') as CadModelOptions[];
+
   const { isLoading: isAssetMappingsLoading } = useAssetMappedNodesForRevisions(cadModels);
   const [isRuleLoading, setIsRuleLoading] = useState(false);
 
+  const [newRuleSetEnabled, setNewRuleSetEnabled] = useState<RuleAndEnabled>();
+
   const ruleInstancesResult = useFetchRuleInstances();
 
   useEffect(() => {
@@ -46,11 +49,13 @@ export const RuleBasedOutputsButton = ({
     setRuleInstances(ruleInstancesResult.data);
   }, [ruleInstancesResult]);
 
+  useEffect(() => {
+    setCurrentRuleSetEnabled(newRuleSetEnabled);
+  }, [newRuleSetEnabled]);
+
   const onChange = useCallback(
     (data: string | undefined): void => {
 
-      setIsRuleLoading(true);
-
       ruleInstances?.forEach((item) => {
         if (item === undefined) return;
         item.isEnabled = false;
@@ -80,8 +85,10 @@ export const RuleBasedOutputsButton = ({
 
       if (callbackFunction !== undefined) callbackFunction(callbackLoaded);
 
+      setIsRuleLoading(true);
+
       setEmptyRuleSelected(emptySelection);
-      setCurrentRuleSetEnabled(selectedRule);
+      setNewRuleSetEnabled(selectedRule);
     },
     [ruleInstances, onRuleSetStylingChanged, onRuleSetSelectedChanged]
   );