split into different useEffects hooks to let render the spinner sooner

cognitedata · Jun 28, 2024 · 67a8b9d · 67a8b9d
1 parent 2c1857c
commit 67a8b9d
Showing 1 changed file with 10 additions and 3 deletions.
diff --git 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]
   );