diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx index 3a44d050e06..b4c8dc72f08 100644 --- 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 index c9365e183a1..03079df5a00 100644 --- 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,13 +92,18 @@ 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(() => { @@ -106,7 +111,7 @@ function useCalculateMappedStyling( models.length === 0 || mappedEquipmentEdges === undefined || mappedEquipmentEdges.size === 0 || - isFDMEquipmentMappingLoading; + isFDMEquipmentMappingsLoading; if (isFdmMappingUnavailableOrLoading) { return []; @@ -124,7 +129,7 @@ function useCalculateMappedStyling( modelsRevisionsWithMappedEquipment, mappedEquipmentEdges, defaultMappedNodeAppearance, - isFDMEquipmentMappingLoading + isFDMEquipmentMappingsLoading ]); const modelsMappedAssetStyleGroups = useMemo(() => { @@ -132,7 +137,7 @@ function useCalculateMappedStyling( 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 index 78a750d21d7..fa8460f5e9f 100644 --- 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(); 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] );