fix(react-components): make sure rule selection spinner terminates (#…

…4701) * fix(react-components): make sure rule selection spinner terminates * chore: lint fix
cognitedata · Aug 13, 2024 · d61d0bb · d61d0bb
1 parent a8264ec
commit d61d0bb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 33 deletions.
diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -83,11 +83,7 @@ export const Reveal3DResources = ({
     [reveal3DModels]
   );
 
-  const {
-    styledModels: styledCadModelOptions,
-    isModelMappingsFetched,
-    isModelMappingsLoading
-  } = useCalculateCadStyling(
+  const { styledModels: styledCadModelOptions, isModelMappingsLoading } = useCalculateCadStyling(
     cadModelOptions,
     instanceStyling?.filter(isCadAssetMappingStylingGroup) ?? EMPTY_ARRAY,
     defaultResourceStyling
@@ -96,8 +92,8 @@ export const Reveal3DResources = ({
   const setModel3DStylingLoading = useReveal3DResourcesStylingLoadingSetter();
 
   useEffect(() => {
-    setModel3DStylingLoading(!(isModelMappingsFetched || !isModelMappingsLoading));
-  }, [isModelMappingsFetched, isModelMappingsLoading]);
+    setModel3DStylingLoading(isModelMappingsLoading);
+  }, [isModelMappingsLoading]);
 
   const instaceStylingWithAssetMappings =
     instanceStyling?.filter(isAssetMappingStylingGroup) ?? EMPTY_ARRAY;

diff --git a/react-components/src/components/Reveal3DResources/useCalculateCadStyling.tsx b/react-components/src/components/Reveal3DResources/useCalculateCadStyling.tsx
@@ -43,13 +43,11 @@ type ModelStyleGroup = {
 
 type ModelStyleGroupWithMappingsFetched = {
   combinedMappedStyleGroups: ModelStyleGroup[];
-  isModelMappingsFetched: boolean;
   isModelMappingsLoading: boolean;
 };
 
 type StyledModelWithMappingsFetched = {
   styledModels: StyledModel[];
-  isModelMappingsFetched: boolean;
   isModelMappingsLoading: boolean;
 };
 
@@ -77,10 +75,12 @@ export const useCalculateCadStyling = (
     modelsMappedStyleGroups.combinedMappedStyleGroups,
     modelInstanceStyleGroupsAndMappingFetched.combinedMappedStyleGroups
   );
+
   return {
     styledModels: joinedStyleGroups,
-    isModelMappingsFetched: modelInstanceStyleGroupsAndMappingFetched.isModelMappingsFetched,
-    isModelMappingsLoading: modelInstanceStyleGroupsAndMappingFetched.isModelMappingsLoading
+    isModelMappingsLoading:
+      modelInstanceStyleGroupsAndMappingFetched.isModelMappingsLoading ||
+      modelsMappedStyleGroups.isModelMappingsLoading
   };
 };
 
@@ -92,21 +92,26 @@ function useCalculateMappedStyling(
     () => getMappedCadModelsOptions(),
     [models, defaultMappedNodeAppearance]
   );
-  const { data: mappedEquipmentEdges, isLoading: isFDMEquipmentMappingLoading } =
-    useMappedEdgesForRevisions(modelsRevisionsWithMappedEquipment);
+  const {
+    data: mappedEquipmentEdges,
+    isLoading: isFDMEquipmentMappingsLoading,
+    isFetched: isFDMEquipmentMappingsFetched,
+    isError: isFDMEquipmentMappingsError
+  } = useMappedEdgesForRevisions(modelsRevisionsWithMappedEquipment);
 
   const {
     data: assetMappingData,
-    isFetched: isModelMappingsFetched,
-    isLoading: isModelMappingsLoading
+    isLoading: isAssetMappingsLoading,
+    isFetched: isAssetMappingsFetched,
+    isError: isAssetMappingsError
   } = useAssetMappedNodesForRevisions(modelsRevisionsWithMappedEquipment);
 
   const modelsMappedFdmStyleGroups = useMemo(() => {
     const isFdmMappingUnavailableOrLoading =
       models.length === 0 ||
       mappedEquipmentEdges === undefined ||
       mappedEquipmentEdges.size === 0 ||
-      isFDMEquipmentMappingLoading;
+      isFDMEquipmentMappingsLoading;
 
     if (isFdmMappingUnavailableOrLoading) {
       return [];
@@ -124,15 +129,15 @@ function useCalculateMappedStyling(
     modelsRevisionsWithMappedEquipment,
     mappedEquipmentEdges,
     defaultMappedNodeAppearance,
-    isFDMEquipmentMappingLoading
+    isFDMEquipmentMappingsLoading
   ]);
 
   const modelsMappedAssetStyleGroups = useMemo(() => {
     const isAssetMappingUnavailableOrLoading =
       models.length === 0 ||
       assetMappingData === undefined ||
       assetMappingData.length === 0 ||
-      isModelMappingsLoading;
+      isAssetMappingsLoading;
 
     if (isAssetMappingUnavailableOrLoading) {
       return [];
@@ -151,7 +156,7 @@ function useCalculateMappedStyling(
     modelsRevisionsWithMappedEquipment,
     assetMappingData,
     defaultMappedNodeAppearance,
-    isModelMappingsLoading
+    isAssetMappingsLoading
   ]);
 
   const combinedMappedStyleGroups = useMemo(
@@ -165,8 +170,11 @@ function useCalculateMappedStyling(
 
   return {
     combinedMappedStyleGroups,
-    isModelMappingsFetched,
-    isModelMappingsLoading
+    isModelMappingsLoading:
+      (!isFDMEquipmentMappingsError &&
+        isFDMEquipmentMappingsLoading &&
+        !isFDMEquipmentMappingsFetched) ||
+      (!isAssetMappingsError && isAssetMappingsLoading && !isAssetMappingsFetched)
   };
 
   function getMappedCadModelsOptions(): CadModelOptions[] {
@@ -195,8 +203,9 @@ function useCalculateInstanceStyling(
 
   const {
     data: modelAssetMappings,
+    isLoading: isModelMappingsLoading,
     isFetched: isModelMappingsFetched,
-    isLoading: isModelMappingsLoading
+    isError
   } = useNodesForAssets(models, assetIdsFromInstanceGroups);
 
   const fdmModelInstanceStyleGroups = useFdmInstanceStyleGroups(
@@ -222,8 +231,7 @@ function useCalculateInstanceStyling(
 
   return {
     combinedMappedStyleGroups,
-    isModelMappingsFetched,
-    isModelMappingsLoading
+    isModelMappingsLoading: !isError && isModelMappingsLoading && !isModelMappingsFetched
   };
 }
 

diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -19,10 +19,7 @@ import { type CadModelOptions } from '../Reveal3DResources/types';
 import { useAssetMappedNodesForRevisions } from '../CacheProvider/AssetMappingAndNode3DCacheProvider';
 import { RuleBasedSelectionItem } from '../RuleBasedOutputs/components/RuleBasedSelectionItem';
 import { generateEmptyRuleForSelection, getRuleBasedById } from '../RuleBasedOutputs/utils';
-import {
-  useReveal3DResourcesStylingLoading,
-  useReveal3DResourcesStylingLoadingSetter
-} from '../Reveal3DResources/Reveal3DResourcesInfoContext';
+import { useReveal3DResourcesStylingLoading } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
 
 type RuleBasedOutputsButtonProps = {
   onRuleSetStylingChanged?: (stylings: AssetStylingGroup[] | undefined) => void;
@@ -49,7 +46,6 @@ export const RuleBasedOutputsButton = ({
 
   const [newRuleSetEnabled, setNewRuleSetEnabled] = useState<RuleAndEnabled>();
   const isRuleLoadingFromContext = useReveal3DResourcesStylingLoading();
-  const setModel3DStylingLoading = useReveal3DResourcesStylingLoadingSetter();
 
   const { data: ruleInstancesResult } = useFetchRuleInstances();
 
@@ -64,7 +60,6 @@ export const RuleBasedOutputsButton = ({
     const hasNewRuleSetEnabled = newRuleSetEnabled !== undefined;
 
     setIsRuleLoading(hasNewRuleSetEnabled);
-    setModel3DStylingLoading(hasNewRuleSetEnabled);
   }, [newRuleSetEnabled]);
 
   useEffect(() => {
@@ -73,7 +68,6 @@ export const RuleBasedOutputsButton = ({
       currentStylingGroups.length > 0 &&
       isRuleLoadingFromContext;
     setIsRuleLoading(hasRuleLoading);
-    setModel3DStylingLoading(hasRuleLoading);
   }, [isRuleLoadingFromContext, currentStylingGroups]);
 
   const onChange = useCallback(
@@ -98,8 +92,6 @@ export const RuleBasedOutputsButton = ({
 
       setEmptyRuleSelected(emptySelection);
       setNewRuleSetEnabled(selectedRule);
-      setIsRuleLoading(true);
-      setModel3DStylingLoading(true);
     },
     [ruleInstances, onRuleSetStylingChanged, onRuleSetSelectedChanged]
   );