diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
index e68db1fcf07..d44470447a1 100644
--- a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
+++ b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -92,6 +92,13 @@ export const Reveal3DResources = ({
     defaultResourceStyling
   );
 
+  const setModel3DStylingLoading = useReveal3DResourcesStylingLoadingSetter();
+  setModel3DStylingLoading(!(isModelMappingsFetched || !isModelMappingsLoading));
+
+  useEffect(() => {
+    setModel3DStylingLoading(!(isModelMappingsFetched || !isModelMappingsLoading));
+  }, [isModelMappingsFetched, isModelMappingsLoading]);
+
   const instaceStylingWithAssetMappings =
     instanceStyling?.filter(isAssetMappingStylingGroup) ?? EMPTY_ARRAY;
 
@@ -131,10 +138,6 @@ export const Reveal3DResources = ({
     }
   };
 
-  const setModel3DStylingLoading = useReveal3DResourcesStylingLoadingSetter();
-
-  setModel3DStylingLoading(!(isModelMappingsFetched || !isModelMappingsLoading));
-
   return (
     <>
       {styledCadModelOptions.map(({ styleGroups, model }, index) => {
diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
index 4be034d76f7..78a750d21d7 100644
--- a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
+++ b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -51,16 +51,15 @@ export const RuleBasedOutputsButton = ({
   const isRuleLoadingFromContext = useReveal3DResourcesStylingLoading();
   const setModel3DStylingLoading = useReveal3DResourcesStylingLoadingSetter();
 
-  const ruleInstancesResult = useFetchRuleInstances();
+  const { data: ruleInstancesResult } = useFetchRuleInstances();
 
   useEffect(() => {
-    if (ruleInstancesResult.data === undefined) return;
-
-    setRuleInstances(ruleInstancesResult.data);
+    setRuleInstances(ruleInstancesResult);
   }, [ruleInstancesResult]);
 
   useEffect(() => {
     setCurrentRuleSetEnabled(newRuleSetEnabled);
+    if (onRuleSetSelectedChanged !== undefined) onRuleSetSelectedChanged(newRuleSetEnabled);
 
     const hasNewRuleSetEnabled = newRuleSetEnabled !== undefined;
 
@@ -73,8 +72,8 @@ export const RuleBasedOutputsButton = ({
       currentStylingGroups !== undefined &&
       currentStylingGroups.length > 0 &&
       isRuleLoadingFromContext;
-
     setIsRuleLoading(hasRuleLoading);
+    setModel3DStylingLoading(hasRuleLoading);
   }, [isRuleLoadingFromContext, currentStylingGroups]);
 
   const onChange = useCallback(
@@ -97,10 +96,10 @@ export const RuleBasedOutputsButton = ({
         if (onRuleSetStylingChanged !== undefined) onRuleSetStylingChanged(undefined);
       }
 
-      if (onRuleSetSelectedChanged !== undefined) onRuleSetSelectedChanged(selectedRule);
-
       setEmptyRuleSelected(emptySelection);
       setNewRuleSetEnabled(selectedRule);
+      setIsRuleLoading(true);
+      setModel3DStylingLoading(true);
     },
     [ruleInstances, onRuleSetStylingChanged, onRuleSetSelectedChanged]
   );
diff --git a/react-components/src/components/RuleBasedOutputs/hooks/useFetchRuleInstances.tsx b/react-components/src/components/RuleBasedOutputs/hooks/useFetchRuleInstances.tsx
index 24879bb3ea2..3b77bf0a3fe 100644
--- a/react-components/src/components/RuleBasedOutputs/hooks/useFetchRuleInstances.tsx
+++ b/react-components/src/components/RuleBasedOutputs/hooks/useFetchRuleInstances.tsx
@@ -7,7 +7,7 @@ import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 import { type RuleAndEnabled, type RuleOutputSet } from '../types';
 import { fdmViewsExist } from '../../../utilities/fdmViewsExist';
 
-export const useFetchRuleInstances = (): UseQueryResult<RuleAndEnabled[], unknown> => {
+export const useFetchRuleInstances = (): UseQueryResult<RuleAndEnabled[], undefined> => {
   const fdmSdk = useFdmSdk();
 
   return useQuery({