diff --git a/react-components/src/components/CacheProvider/AssetMappingAndNode3DCache.ts b/react-components/src/components/CacheProvider/AssetMappingAndNode3DCache.ts
new file mode 100644
index 00000000000..2b6cb7aac18
--- /dev/null
+++ b/react-components/src/components/CacheProvider/AssetMappingAndNode3DCache.ts
@@ -0,0 +1,363 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import {
+  type CogniteClient,
+  type AssetMapping3D,
+  type Node3D,
+  type CogniteInternalId
+} from '@cognite/sdk';
+import {
+  type ModelNodeIdKey,
+  type AssetId,
+  type ModelId,
+  type RevisionId,
+  type ChunkInCacheTypes,
+  type ModelAssetIdKey
+} from './types';
+import { chunk, maxBy } from 'lodash';
+import assert from 'assert';
+import { isValidAssetMapping, modelRevisionNodesAssetsToKey, modelRevisionToKey } from './utils';
+import { type ModelWithAssetMappings } from './AssetMappingAndNode3DCacheProvider';
+import { AssetMappingPerAssetIdCache } from './AssetMappingPerAssetIdCache';
+import { AssetMappingPerNodeIdCache } from './AssetMappingPerNodeIdCache';
+import { Node3DPerNodeIdCache } from './Node3DPerNodeIdCache';
+import { AssetMappingPerModelCache } from './AssetMappingPerModelCache';
+
+export type NodeAssetMappingResult = { node?: Node3D; mappings: AssetMapping[] };
+
+export type AssetMapping = Required<AssetMapping3D>;
+export class AssetMappingAndNode3DCache {
+  private readonly _sdk: CogniteClient;
+
+  private readonly modelToAssetMappingsCache: AssetMappingPerModelCache;
+
+  private readonly assetIdsToAssetMappingCache: AssetMappingPerAssetIdCache;
+
+  private readonly nodeIdsToAssetMappingCache: AssetMappingPerNodeIdCache;
+
+  private readonly nodeIdsToNode3DCache: Node3DPerNodeIdCache;
+
+  private readonly _amountOfAssetIdsChunks = 1;
+
+  constructor(sdk: CogniteClient) {
+    this._sdk = sdk;
+    this.assetIdsToAssetMappingCache = new AssetMappingPerAssetIdCache();
+    this.nodeIdsToAssetMappingCache = new AssetMappingPerNodeIdCache();
+    this.modelToAssetMappingsCache = new AssetMappingPerModelCache(this._sdk);
+    this.nodeIdsToNode3DCache = new Node3DPerNodeIdCache(this._sdk);
+  }
+
+  public async getAssetMappingsForLowestAncestor(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    ancestors: Node3D[]
+  ): Promise<NodeAssetMappingResult> {
+    if (ancestors.length === 0) {
+      return { mappings: [] };
+    }
+
+    const searchTreeIndices = new Set(ancestors.map((ancestor) => ancestor.treeIndex));
+    const allNodeMappings = await this.getAssetMappingsForNodes(modelId, revisionId, ancestors);
+
+    const relevantMappings = allNodeMappings.filter((mapping) =>
+      searchTreeIndices.has(mapping.treeIndex)
+    );
+
+    if (relevantMappings.length === 0) {
+      return { mappings: [] };
+    }
+
+    const maxRelevantMappingTreeIndex = maxBy(
+      relevantMappings,
+      (mapping) => mapping.treeIndex
+    )?.treeIndex;
+
+    assert(maxRelevantMappingTreeIndex !== undefined);
+
+    const mappingsOfNearestAncestor = relevantMappings.filter(
+      (mapping) => mapping.treeIndex === maxRelevantMappingTreeIndex
+    );
+
+    const nearestMappedAncestor = ancestors.find(
+      (node) => node.treeIndex === maxRelevantMappingTreeIndex
+    );
+    assert(nearestMappedAncestor !== undefined);
+
+    return { node: nearestMappedAncestor, mappings: mappingsOfNearestAncestor };
+  }
+
+  public async getNodesForAssetIds(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    assetIds: CogniteInternalId[]
+  ): Promise<Map<AssetId, Node3D[]>> {
+    const relevantAssetIds = new Set(assetIds);
+
+    const assetIdsList = Array.from(relevantAssetIds);
+    const chunkSize = Math.round(assetIdsList.length / this._amountOfAssetIdsChunks);
+    const listChunks = chunk(assetIdsList, chunkSize);
+
+    const allAssetMappingsReturned = listChunks.map(async (itemChunk) => {
+      const assetMappings = await this.getAssetMappingsForAssetIds(modelId, revisionId, itemChunk);
+      return assetMappings;
+    });
+
+    const allAssetMappings = await Promise.all(allAssetMappingsReturned);
+    const assetMappings = allAssetMappings.flat();
+
+    const relevantAssetMappings = assetMappings.filter((mapping) =>
+      relevantAssetIds.has(mapping.assetId)
+    );
+
+    const nodes = await this.nodeIdsToNode3DCache.getNodesForNodeIds(
+      modelId,
+      revisionId,
+      relevantAssetMappings.map((assetMapping) => assetMapping.nodeId)
+    );
+
+    return nodes.reduce((acc, node, index) => {
+      const key = relevantAssetMappings[index].assetId;
+      const nodesForAsset = acc.get(key);
+
+      if (nodesForAsset !== undefined) {
+        nodesForAsset.push(node);
+      } else {
+        acc.set(key, [node]);
+      }
+
+      return acc;
+    }, new Map<AssetId, Node3D[]>());
+  }
+
+  public async generateNode3DCachePerItem(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    nodeIds: number[] | undefined
+  ): Promise<void> {
+    await this.nodeIdsToNode3DCache.generateNode3DCachePerItem(modelId, revisionId, nodeIds);
+  }
+
+  public async generateAssetMappingsCachePerItemFromModelCache(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    assetMappingsPerModel: ModelWithAssetMappings[] | undefined
+  ): Promise<void> {
+    if (assetMappingsPerModel === undefined) {
+      return;
+    }
+    assetMappingsPerModel.forEach(async (modelMapping) => {
+      modelMapping.assetMappings.forEach(async (item) => {
+        const key = modelRevisionNodesAssetsToKey(modelId, revisionId, [item.assetId]);
+        await this.assetIdsToAssetMappingCache.setAssetMappingsCacheItem(key, item);
+      });
+    });
+  }
+
+  public async getAssetMappingsForModel(
+    modelId: ModelId,
+    revisionId: RevisionId
+  ): Promise<AssetMapping[]> {
+    const key = modelRevisionToKey(modelId, revisionId);
+    const cachedResult = await this.modelToAssetMappingsCache.getModelToAssetMappingCacheItems(key);
+
+    if (cachedResult !== undefined) {
+      return cachedResult;
+    }
+
+    return await this.modelToAssetMappingsCache.fetchAndCacheMappingsForModel(modelId, revisionId);
+  }
+
+  private async splitChunkInCacheAssetMappings(
+    currentChunk: number[],
+    modelId: ModelId,
+    revisionId: RevisionId,
+    type: string
+  ): Promise<ChunkInCacheTypes<AssetMapping3D>> {
+    const chunkInCache: Array<Required<AssetMapping3D>> = [];
+    const chunkNotCached: number[] = [];
+
+    await Promise.all(
+      currentChunk.map(async (id) => {
+        const key = modelRevisionNodesAssetsToKey(modelId, revisionId, [id]);
+        const cachedResult = await this.getItemCacheResult(type, key);
+        if (cachedResult !== undefined) {
+          chunkInCache.push(...cachedResult);
+        } else {
+          chunkNotCached.push(id);
+        }
+      })
+    );
+
+    return { chunkInCache, chunkNotInCache: chunkNotCached };
+  }
+
+  private async getItemCacheResult(
+    type: string,
+    key: ModelNodeIdKey | ModelAssetIdKey
+  ): Promise<AssetMapping[] | undefined> {
+    return type === 'nodeIds'
+      ? await this.nodeIdsToAssetMappingCache.getNodeIdsToAssetMappingCacheItem(key)
+      : await this.assetIdsToAssetMappingCache.getAssetIdsToAssetMappingCacheItem(key);
+  }
+
+  private setItemCacheResult(
+    type: string,
+    key: ModelNodeIdKey | ModelAssetIdKey,
+    item: AssetMapping[] | undefined
+  ): void {
+    const value = Promise.resolve(item ?? []);
+    type === 'nodeIds'
+      ? this.nodeIdsToAssetMappingCache.setNodeIdsToAssetMappingCacheItem(key, value)
+      : this.assetIdsToAssetMappingCache.setAssetIdsToAssetMappingCacheItem(key, value);
+  }
+
+  private async fetchAssetMappingsRequest(
+    currentChunk: number[],
+    filterType: string,
+    modelId: ModelId,
+    revisionId: RevisionId
+  ): Promise<AssetMapping[]> {
+    let assetMapping3D: AssetMapping3D[] = [];
+
+    if (currentChunk.length === 0) {
+      return [];
+    }
+    const filter =
+      filterType === 'nodeIds' ? { nodeIds: currentChunk } : { assetIds: currentChunk };
+
+    assetMapping3D = await this._sdk.assetMappings3D
+      .filter(modelId, revisionId, {
+        limit: 1000,
+        filter
+      })
+      .autoPagingToArray({ limit: Infinity });
+
+    assetMapping3D.forEach(async (item) => {
+      const keyAssetId: ModelAssetIdKey = modelRevisionNodesAssetsToKey(modelId, revisionId, [
+        item.assetId
+      ]);
+      const keyNodeId: ModelNodeIdKey = modelRevisionNodesAssetsToKey(modelId, revisionId, [
+        item.nodeId
+      ]);
+      await this.assetIdsToAssetMappingCache.setAssetMappingsCacheItem(keyAssetId, item);
+      await this.nodeIdsToAssetMappingCache.setAssetMappingsCacheItem(keyNodeId, item);
+    });
+
+    currentChunk.forEach(async (id) => {
+      const key = modelRevisionNodesAssetsToKey(modelId, revisionId, [id]);
+      const cachedResult = await this.getItemCacheResult(filterType, key);
+
+      if (cachedResult === undefined) {
+        this.setItemCacheResult(filterType, key, []);
+      }
+    });
+
+    return assetMapping3D.filter(isValidAssetMapping);
+  }
+
+  private async fetchMappingsInQueue(
+    index: number,
+    idChunks: number[][],
+    filterType: string,
+    modelId: ModelId,
+    revisionId: RevisionId,
+    assetMappingsList: Array<Required<AssetMapping3D>>
+  ): Promise<AssetMapping3D[]> {
+    const assetMappings = await this.fetchAssetMappingsRequest(
+      idChunks[index],
+      filterType,
+      modelId,
+      revisionId
+    );
+
+    assetMappingsList = assetMappingsList.concat(assetMappings);
+    if (index >= idChunks.length - 1) {
+      return assetMappingsList;
+    }
+
+    const nextIndex = index + 1;
+    return await this.fetchMappingsInQueue(
+      nextIndex,
+      idChunks,
+      filterType,
+      modelId,
+      revisionId,
+      assetMappingsList
+    );
+  }
+
+  private async fetchAndCacheMappingsForIds(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    ids: number[],
+    filterType: string
+  ): Promise<AssetMapping[]> {
+    if (ids.length === 0) {
+      return [];
+    }
+    const idChunks = chunk(ids, 100);
+    const initialIndex = 0;
+    const assetMappings = await this.fetchMappingsInQueue(
+      initialIndex,
+      idChunks,
+      filterType,
+      modelId,
+      revisionId,
+      []
+    );
+    return assetMappings;
+  }
+
+  private async getAssetMappingsForNodes(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    nodes: Node3D[]
+  ): Promise<AssetMapping[]> {
+    const nodeIds = nodes.map((node) => node.id);
+
+    const { chunkNotInCache, chunkInCache } = await this.splitChunkInCacheAssetMappings(
+      nodeIds,
+      modelId,
+      revisionId,
+      'nodeIds'
+    );
+
+    const notCachedNodeIds: number[] = chunkNotInCache;
+
+    const assetMappings = await this.fetchAndCacheMappingsForIds(
+      modelId,
+      revisionId,
+      notCachedNodeIds,
+      'nodeIds'
+    );
+
+    const allAssetMappings = chunkInCache.concat(assetMappings);
+    return allAssetMappings;
+  }
+
+  private async getAssetMappingsForAssetIds(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    assetIds: number[]
+  ): Promise<AssetMapping[]> {
+    const { chunkNotInCache, chunkInCache } = await this.splitChunkInCacheAssetMappings(
+      assetIds,
+      modelId,
+      revisionId,
+      'assetIds'
+    );
+
+    const notCachedAssetIds: number[] = chunkNotInCache;
+
+    const assetMappings = await this.fetchAndCacheMappingsForIds(
+      modelId,
+      revisionId,
+      notCachedAssetIds,
+      'assetIds'
+    );
+    const allAssetMappings = chunkInCache.concat(assetMappings);
+    return allAssetMappings;
+  }
+}
diff --git a/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx b/react-components/src/components/CacheProvider/AssetMappingAndNode3DCacheProvider.tsx
similarity index 57%
rename from react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx
rename to react-components/src/components/CacheProvider/AssetMappingAndNode3DCacheProvider.tsx
index 364d5621296..768a1a27bf2 100644
--- a/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx
+++ b/react-components/src/components/CacheProvider/AssetMappingAndNode3DCacheProvider.tsx
@@ -6,9 +6,9 @@ import { type ReactElement, type ReactNode, createContext, useContext, useMemo }
 import { type CadModelOptions } from '../Reveal3DResources/types';
 import {
   type AssetMapping,
-  AssetMappingCache,
+  AssetMappingAndNode3DCache,
   type NodeAssetMappingResult
-} from './AssetMappingCache';
+} from './AssetMappingAndNode3DCache';
 import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 import { type CogniteInternalId } from '@cognite/sdk';
 import { useSDK } from '../RevealCanvas/SDKProvider';
@@ -17,8 +17,8 @@ import { type ModelRevisionId, type ModelRevisionAssetNodesResult } from './type
 import { fetchAncestorNodesForTreeIndex } from './requests';
 import { type AnyIntersection } from '@cognite/reveal';
 
-export type AssetMappingCacheContent = {
-  cache: AssetMappingCache;
+export type AssetMappingAndNode3DCacheContent = {
+  cache: AssetMappingAndNode3DCache;
 };
 
 export type ModelWithAssetMappings = {
@@ -26,22 +26,71 @@ export type ModelWithAssetMappings = {
   assetMappings: AssetMapping[];
 };
 
-const AssetMappingCacheContext = createContext<AssetMappingCacheContent | undefined>(undefined);
+const AssetMappingAndNode3DCacheContext = createContext<
+  AssetMappingAndNode3DCacheContent | undefined
+>(undefined);
 
-const useAssetMappingCache = (): AssetMappingCache => {
-  const content = useContext(AssetMappingCacheContext);
+const useAssetMappingAndNode3DCache = (): AssetMappingAndNode3DCache => {
+  const content = useContext(AssetMappingAndNode3DCacheContext);
 
   if (content === undefined) {
-    throw Error('Must use useAssetMappingCache inside a AssetMappingCacheContext');
+    throw Error('Must use useAssetMappingAndNode3DCache inside a AssetMappingCacheContext');
   }
 
   return content.cache;
 };
 
+export const useGenerateNode3DCache = (
+  cadModelOptions: CadModelOptions[],
+  assetMappings: ModelWithAssetMappings[] | undefined
+): void => {
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
+
+  useMemo(() => {
+    cadModelOptions.forEach(async ({ modelId, revisionId }) => {
+      const assetMapping = assetMappings?.filter(
+        (item) => item.model.modelId === modelId && item.model.revisionId === revisionId
+      );
+      const nodeIdsFromAssetMappings = assetMapping?.flatMap((item) =>
+        item.assetMappings.map((mapping) => mapping.nodeId)
+      );
+
+      if (nodeIdsFromAssetMappings === undefined || nodeIdsFromAssetMappings.length === 0) return;
+
+      await assetMappingAndNode3DCache.generateNode3DCachePerItem(
+        modelId,
+        revisionId,
+        nodeIdsFromAssetMappings
+      );
+    });
+  }, [cadModelOptions, assetMappings]);
+};
+
+export const useGenerateAssetMappingCachePerItemFromModelCache = (
+  cadModelOptions: CadModelOptions[],
+  assetMappings: ModelWithAssetMappings[] | undefined
+): void => {
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
+  useMemo(() => {
+    cadModelOptions.forEach(async ({ modelId, revisionId }) => {
+      const assetMapping = assetMappings?.filter(
+        (item) => item.model.modelId === modelId && item.model.revisionId === revisionId
+      );
+      if (assetMapping !== undefined && assetMapping.length > 0) {
+        await assetMappingAndNode3DCache.generateAssetMappingsCachePerItemFromModelCache(
+          modelId,
+          revisionId,
+          assetMapping
+        );
+      }
+    });
+  }, [cadModelOptions, assetMappings]);
+};
+
 export const useAssetMappedNodesForRevisions = (
   cadModels: CadModelOptions[]
 ): UseQueryResult<ModelWithAssetMappings[]> => {
-  const assetMappingCache = useAssetMappingCache();
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
 
   return useQuery({
     queryKey: [
@@ -53,7 +102,7 @@ export const useAssetMappedNodesForRevisions = (
     queryFn: async () => {
       const fetchPromises = cadModels.map(
         async (model) =>
-          await assetMappingCache
+          await assetMappingAndNode3DCache
             .getAssetMappingsForModel(model.modelId, model.revisionId)
             .then((assetMappings) => ({ model, assetMappings }))
       );
@@ -68,7 +117,7 @@ export const useNodesForAssets = (
   models: ModelRevisionId[],
   assetIds: CogniteInternalId[]
 ): UseQueryResult<ModelRevisionAssetNodesResult[]> => {
-  const assetMappingCache = useAssetMappingCache();
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
 
   return useQuery({
     queryKey: [
@@ -80,7 +129,7 @@ export const useNodesForAssets = (
     ],
     queryFn: async () => {
       const modelAndNodeMapPromises = models.map(async (model) => {
-        const nodeMap = await assetMappingCache.getNodesForAssetIds(
+        const nodeMap = await assetMappingAndNode3DCache.getNodesForAssetIds(
           model.modelId,
           model.revisionId,
           assetIds
@@ -98,7 +147,7 @@ export const useNodesForAssets = (
 export const useAssetMappingForTreeIndex = (
   intersection: AnyIntersection | undefined
 ): UseQueryResult<NodeAssetMappingResult> => {
-  const assetMappingCache = useAssetMappingCache();
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
   const cdfClient = useSDK();
 
   const isCadModel = intersection?.type === 'cad';
@@ -130,7 +179,7 @@ export const useAssetMappingForTreeIndex = (
         cdfClient
       );
 
-      return await assetMappingCache.getAssetMappingsForLowestAncestor(
+      return await assetMappingAndNode3DCache.getAssetMappingsForLowestAncestor(
         modelId,
         revisionId,
         ancestors
@@ -140,13 +189,17 @@ export const useAssetMappingForTreeIndex = (
   });
 };
 
-export function AssetMappingCacheProvider({ children }: { children?: ReactNode }): ReactElement {
+export function AssetMappingAndNode3DCacheProvider({
+  children
+}: {
+  children?: ReactNode;
+}): ReactElement {
   const cdfClient = useSDK();
   const revealKeepAliveData = useRevealKeepAlive();
 
   const fdmCache = useMemo(() => {
     const cache =
-      revealKeepAliveData?.assetMappingCache.current ?? new AssetMappingCache(cdfClient);
+      revealKeepAliveData?.assetMappingCache.current ?? new AssetMappingAndNode3DCache(cdfClient);
 
     const isRevealKeepAliveContextProvided = revealKeepAliveData !== undefined;
     if (isRevealKeepAliveContextProvided) {
@@ -157,8 +210,8 @@ export function AssetMappingCacheProvider({ children }: { children?: ReactNode }
   }, [cdfClient]);
 
   return (
-    <AssetMappingCacheContext.Provider value={{ cache: fdmCache }}>
+    <AssetMappingAndNode3DCacheContext.Provider value={{ cache: fdmCache }}>
       {children}
-    </AssetMappingCacheContext.Provider>
+    </AssetMappingAndNode3DCacheContext.Provider>
   );
 }
diff --git a/react-components/src/components/CacheProvider/AssetMappingCache.ts b/react-components/src/components/CacheProvider/AssetMappingCache.ts
deleted file mode 100644
index 49fdad14422..00000000000
--- a/react-components/src/components/CacheProvider/AssetMappingCache.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-
-import {
-  type CogniteClient,
-  type AssetMapping3D,
-  type Node3D,
-  type CogniteInternalId
-} from '@cognite/sdk';
-import {
-  type ModelNodeIdKey,
-  type AssetId,
-  type ModelId,
-  type ModelRevisionKey,
-  type RevisionId
-} from './types';
-import { chunk, maxBy } from 'lodash';
-import assert from 'assert';
-import { fetchNodesForNodeIds } from './requests';
-import { modelRevisionNodesAssetsToKey, modelRevisionToKey } from './utils';
-
-export type NodeAssetMappingResult = { node?: Node3D; mappings: AssetMapping[] };
-
-export type AssetMapping = Required<AssetMapping3D>;
-
-export class AssetMappingCache {
-  private readonly _sdk: CogniteClient;
-
-  private readonly _modelToAssetMappings = new Map<ModelRevisionKey, Promise<AssetMapping[]>>();
-  private readonly _nodeAssetIdsToAssetMappings = new Map<
-    ModelNodeIdKey,
-    Promise<AssetMapping[]>
-  >();
-
-  constructor(sdk: CogniteClient) {
-    this._sdk = sdk;
-  }
-
-  public async getAssetMappingsForLowestAncestor(
-    modelId: ModelId,
-    revisionId: RevisionId,
-    ancestors: Node3D[]
-  ): Promise<NodeAssetMappingResult> {
-    if (ancestors.length === 0) {
-      return { mappings: [] };
-    }
-
-    const searchTreeIndices = new Set(ancestors.map((ancestor) => ancestor.treeIndex));
-    const allNodeMappings = await this.getAssetMappingsForNodes(modelId, revisionId, ancestors);
-
-    const relevantMappings = allNodeMappings.filter((mapping) =>
-      searchTreeIndices.has(mapping.treeIndex)
-    );
-
-    if (relevantMappings.length === 0) {
-      return { mappings: [] };
-    }
-
-    const maxRelevantMappingTreeIndex = maxBy(
-      relevantMappings,
-      (mapping) => mapping.treeIndex
-    )?.treeIndex;
-
-    assert(maxRelevantMappingTreeIndex !== undefined);
-
-    const mappingsOfNearestAncestor = relevantMappings.filter(
-      (mapping) => mapping.treeIndex === maxRelevantMappingTreeIndex
-    );
-
-    const nearestMappedAncestor = ancestors.find(
-      (node) => node.treeIndex === maxRelevantMappingTreeIndex
-    );
-    assert(nearestMappedAncestor !== undefined);
-
-    return { node: nearestMappedAncestor, mappings: mappingsOfNearestAncestor };
-  }
-
-  public async getNodesForAssetIds(
-    modelId: ModelId,
-    revisionId: RevisionId,
-    assetIds: CogniteInternalId[]
-  ): Promise<Map<AssetId, Node3D[]>> {
-    const assetMappings = await this.getAssetMappingsForAssetIds(modelId, revisionId, assetIds);
-    const relevantAssetIds = new Set(assetIds);
-
-    const relevantAssetMappings = assetMappings.filter((mapping) =>
-      relevantAssetIds.has(mapping.assetId)
-    );
-
-    const nodes = await fetchNodesForNodeIds(
-      modelId,
-      revisionId,
-      relevantAssetMappings.map((assetMapping) => assetMapping.nodeId),
-      this._sdk
-    );
-
-    return nodes.reduce((acc, node, index) => {
-      const key = relevantAssetMappings[index].assetId;
-      const nodesForAsset = acc.get(key);
-
-      if (nodesForAsset !== undefined) {
-        nodesForAsset.push(node);
-      } else {
-        acc.set(key, [node]);
-      }
-
-      return acc;
-    }, new Map<AssetId, Node3D[]>());
-  }
-
-  public async getAssetMappingsForModel(
-    modelId: ModelId,
-    revisionId: RevisionId
-  ): Promise<AssetMapping[]> {
-    const key = modelRevisionToKey(modelId, revisionId);
-    const cachedResult = this._modelToAssetMappings.get(key);
-
-    if (cachedResult !== undefined) {
-      return await cachedResult;
-    }
-
-    return await this.fetchAndCacheMappingsForModel(modelId, revisionId);
-  }
-
-  private async fetchAndCacheMappingsForIds(
-    modelId: ModelId,
-    revisionId: RevisionId,
-    ids: number[],
-    filterType: string
-  ): Promise<AssetMapping[]> {
-    const key: ModelNodeIdKey = modelRevisionNodesAssetsToKey(modelId, revisionId, ids);
-    const idChunks = chunk(ids, 100);
-    const assetMappingsPromises = idChunks.map(async (idChunk) => {
-      const filter = filterType === 'nodeIds' ? { nodeIds: idChunk } : { assetIds: idChunk };
-      return await this._sdk.assetMappings3D
-        .filter(modelId, revisionId, {
-          limit: 1000,
-          filter
-        })
-        .autoPagingToArray({ limit: Infinity });
-    });
-    const assetMappingsArrays = await Promise.all(assetMappingsPromises);
-    const assetMappings = assetMappingsArrays.flat();
-    this._nodeAssetIdsToAssetMappings.set(key, Promise.resolve(assetMappings));
-    return assetMappings;
-  }
-
-  private async getAssetMappingsForNodes(
-    modelId: ModelId,
-    revisionId: RevisionId,
-    nodes: Node3D[]
-  ): Promise<AssetMapping[]> {
-    const nodeIds = nodes.map((node) => node.id);
-    const key: ModelNodeIdKey = modelRevisionNodesAssetsToKey(modelId, revisionId, nodeIds);
-    const cachedResult = this._nodeAssetIdsToAssetMappings.get(key);
-
-    if (cachedResult !== undefined) {
-      return await cachedResult;
-    }
-    return await this.fetchAndCacheMappingsForIds(modelId, revisionId, nodeIds, 'nodeIds');
-  }
-
-  private async getAssetMappingsForAssetIds(
-    modelId: ModelId,
-    revisionId: RevisionId,
-    assetIds: number[]
-  ): Promise<AssetMapping[]> {
-    const key: ModelNodeIdKey = modelRevisionNodesAssetsToKey(modelId, revisionId, assetIds);
-    const cachedResult = this._nodeAssetIdsToAssetMappings.get(key);
-
-    if (cachedResult !== undefined) {
-      return await cachedResult;
-    }
-    return await this.fetchAndCacheMappingsForIds(modelId, revisionId, assetIds, 'assetIds');
-  }
-
-  private async fetchAndCacheMappingsForModel(
-    modelId: ModelId,
-    revisionId: RevisionId
-  ): Promise<AssetMapping[]> {
-    const key = modelRevisionToKey(modelId, revisionId);
-    const assetMappings = this.fetchAssetMappingsForModel(modelId, revisionId);
-
-    this._modelToAssetMappings.set(key, assetMappings);
-    return await assetMappings;
-  }
-
-  private async fetchAssetMappingsForModel(
-    modelId: ModelId,
-    revisionId: RevisionId
-  ): Promise<AssetMapping[]> {
-    const assetMapping3D = await this._sdk.assetMappings3D
-      .list(modelId, revisionId, { limit: 1000 })
-      .autoPagingToArray({ limit: Infinity });
-
-    return assetMapping3D.filter(isValidAssetMapping);
-  }
-}
-
-function isValidAssetMapping(assetMapping: AssetMapping3D): assetMapping is AssetMapping {
-  return assetMapping.treeIndex !== undefined && assetMapping.subtreeSize !== undefined;
-}
diff --git a/react-components/src/components/CacheProvider/AssetMappingPerAssetIdCache.ts b/react-components/src/components/CacheProvider/AssetMappingPerAssetIdCache.ts
new file mode 100644
index 00000000000..83c9512d253
--- /dev/null
+++ b/react-components/src/components/CacheProvider/AssetMappingPerAssetIdCache.ts
@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type AssetMapping3D } from '@cognite/sdk/dist/src';
+import { type ModelAssetIdKey } from './types';
+import { type AssetMapping } from './AssetMappingAndNode3DCache';
+
+export class AssetMappingPerAssetIdCache {
+  private readonly _assetIdsToAssetMappings = new Map<ModelAssetIdKey, Promise<AssetMapping[]>>();
+
+  public setAssetIdsToAssetMappingCacheItem(
+    key: ModelAssetIdKey,
+    item: Promise<Array<Required<AssetMapping3D>>>
+  ): void {
+    this._assetIdsToAssetMappings.set(key, Promise.resolve(item));
+  }
+
+  public async getAssetIdsToAssetMappingCacheItem(
+    key: ModelAssetIdKey
+  ): Promise<AssetMapping[] | undefined> {
+    return await this._assetIdsToAssetMappings.get(key);
+  }
+
+  public async setAssetMappingsCacheItem(key: ModelAssetIdKey, item: AssetMapping): Promise<void> {
+    const currentAssetMappings = this.getAssetIdsToAssetMappingCacheItem(key);
+    this.setAssetIdsToAssetMappingCacheItem(
+      key,
+      currentAssetMappings.then((value) => {
+        if (value === undefined) {
+          return [item];
+        }
+        value.push(item);
+        return value;
+      })
+    );
+  }
+}
diff --git a/react-components/src/components/CacheProvider/AssetMappingPerModelCache.ts b/react-components/src/components/CacheProvider/AssetMappingPerModelCache.ts
new file mode 100644
index 00000000000..2e6b0565920
--- /dev/null
+++ b/react-components/src/components/CacheProvider/AssetMappingPerModelCache.ts
@@ -0,0 +1,52 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type CogniteClient, type AssetMapping3D } from '@cognite/sdk/dist/src';
+import { type ModelId, type RevisionId, type ModelRevisionKey } from './types';
+import { type AssetMapping } from './AssetMappingAndNode3DCache';
+import { isValidAssetMapping, modelRevisionToKey } from './utils';
+
+export class AssetMappingPerModelCache {
+  private readonly _sdk: CogniteClient;
+
+  private readonly _modelToAssetMappings = new Map<ModelRevisionKey, Promise<AssetMapping[]>>();
+
+  constructor(sdk: CogniteClient) {
+    this._sdk = sdk;
+  }
+
+  public setModelToAssetMappingCacheItems(
+    key: ModelRevisionKey,
+    assetMappings: Promise<Array<Required<AssetMapping3D>>>
+  ): void {
+    this._modelToAssetMappings.set(key, assetMappings);
+  }
+
+  public async getModelToAssetMappingCacheItems(
+    key: ModelRevisionKey
+  ): Promise<AssetMapping[] | undefined> {
+    return await this._modelToAssetMappings.get(key);
+  }
+
+  public async fetchAndCacheMappingsForModel(
+    modelId: ModelId,
+    revisionId: RevisionId
+  ): Promise<AssetMapping[]> {
+    const key = modelRevisionToKey(modelId, revisionId);
+    const assetMappings = this.fetchAssetMappingsForModel(modelId, revisionId);
+
+    this.setModelToAssetMappingCacheItems(key, assetMappings);
+    return await assetMappings;
+  }
+
+  private async fetchAssetMappingsForModel(
+    modelId: ModelId,
+    revisionId: RevisionId
+  ): Promise<AssetMapping[]> {
+    const assetMapping3D = await this._sdk.assetMappings3D
+      .list(modelId, revisionId, { limit: 1000 })
+      .autoPagingToArray({ limit: Infinity });
+
+    return assetMapping3D.filter(isValidAssetMapping);
+  }
+}
diff --git a/react-components/src/components/CacheProvider/AssetMappingPerNodeIdCache.ts b/react-components/src/components/CacheProvider/AssetMappingPerNodeIdCache.ts
new file mode 100644
index 00000000000..67299645b11
--- /dev/null
+++ b/react-components/src/components/CacheProvider/AssetMappingPerNodeIdCache.ts
@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type AssetMapping3D } from '@cognite/sdk/dist/src';
+import { type ModelNodeIdKey } from './types';
+import { type AssetMapping } from './AssetMappingAndNode3DCache';
+
+export class AssetMappingPerNodeIdCache {
+  private readonly _nodeIdsToAssetMappings = new Map<ModelNodeIdKey, Promise<AssetMapping[]>>();
+
+  public setNodeIdsToAssetMappingCacheItem(
+    key: ModelNodeIdKey,
+    item: Promise<Array<Required<AssetMapping3D>>>
+  ): void {
+    this._nodeIdsToAssetMappings.set(key, Promise.resolve(item));
+  }
+
+  public async getNodeIdsToAssetMappingCacheItem(
+    key: ModelNodeIdKey
+  ): Promise<AssetMapping[] | undefined> {
+    return await this._nodeIdsToAssetMappings.get(key);
+  }
+
+  public async setAssetMappingsCacheItem(key: ModelNodeIdKey, item: AssetMapping): Promise<void> {
+    const currentAssetMappings = this.getNodeIdsToAssetMappingCacheItem(key);
+    this.setNodeIdsToAssetMappingCacheItem(
+      key,
+      currentAssetMappings.then((value) => {
+        if (value === undefined) {
+          return [item];
+        }
+        value.push(item);
+        return value;
+      })
+    );
+  }
+}
diff --git a/react-components/src/components/CacheProvider/Node3DPerNodeIdCache.ts b/react-components/src/components/CacheProvider/Node3DPerNodeIdCache.ts
new file mode 100644
index 00000000000..62d8cc53f30
--- /dev/null
+++ b/react-components/src/components/CacheProvider/Node3DPerNodeIdCache.ts
@@ -0,0 +1,81 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type Node3D, type CogniteClient } from '@cognite/sdk';
+import {
+  type ChunkInCacheTypes,
+  type ModelId,
+  type RevisionId,
+  type ModelNodeIdKey
+} from './types';
+import { modelRevisionNodesAssetsToKey } from './utils';
+import { fetchNodesForNodeIds } from './requests';
+
+export class Node3DPerNodeIdCache {
+  private readonly _sdk: CogniteClient;
+
+  private readonly _nodeIdsToNode3D = new Map<ModelNodeIdKey, Promise<Node3D>>();
+
+  constructor(sdk: CogniteClient) {
+    this._sdk = sdk;
+  }
+
+  private async splitChunkInCacheNode3D(
+    currentChunk: number[],
+    modelId: ModelId,
+    revisionId: RevisionId
+  ): Promise<ChunkInCacheTypes<Node3D>> {
+    const chunkInCache: Node3D[] = [];
+    const chunkNotCached: number[] = [];
+
+    await Promise.all(
+      currentChunk.map(async (id) => {
+        const key = modelRevisionNodesAssetsToKey(modelId, revisionId, [id]);
+        const cachedResult = await this.getNodeIdToNode3DCacheItem(key);
+        if (cachedResult !== undefined) {
+          chunkInCache.push(cachedResult);
+        } else {
+          chunkNotCached.push(id);
+        }
+      })
+    );
+
+    return { chunkInCache, chunkNotInCache: chunkNotCached };
+  }
+
+  public async generateNode3DCachePerItem(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    nodeIds: number[] | undefined
+  ): Promise<void> {
+    const node3Ds = await this.getNodesForNodeIds(modelId, revisionId, nodeIds ?? []);
+    node3Ds.forEach((node) => {
+      const key = modelRevisionNodesAssetsToKey(modelId, revisionId, [node.id]);
+      this.setNodeIdToNode3DCacheItem(key, Promise.resolve(node));
+    });
+  }
+
+  public async getNodesForNodeIds(
+    modelId: ModelId,
+    revisionId: RevisionId,
+    nodeIds: number[]
+  ): Promise<Node3D[]> {
+    const { chunkNotInCache, chunkInCache } = await this.splitChunkInCacheNode3D(
+      nodeIds,
+      modelId,
+      revisionId
+    );
+
+    const nodes = await fetchNodesForNodeIds(modelId, revisionId, chunkNotInCache, this._sdk);
+    const allNodes = chunkInCache.concat(nodes);
+    return allNodes;
+  }
+
+  public async getNodeIdToNode3DCacheItem(key: ModelNodeIdKey): Promise<Node3D | undefined> {
+    return await this._nodeIdsToNode3D.get(key);
+  }
+
+  public setNodeIdToNode3DCacheItem(key: ModelNodeIdKey, item: Promise<Node3D>): void {
+    this._nodeIdsToNode3D.set(key, Promise.resolve(item));
+  }
+}
diff --git a/react-components/src/components/CacheProvider/types.ts b/react-components/src/components/CacheProvider/types.ts
index c8cdece601c..e1ac16a90c4 100644
--- a/react-components/src/components/CacheProvider/types.ts
+++ b/react-components/src/components/CacheProvider/types.ts
@@ -64,3 +64,8 @@ export type Image360AnnotationAssetInfo = {
 };
 
 export type AnnotationId = number;
+
+export type ChunkInCacheTypes<ObjectType> = {
+  chunkInCache: ObjectType[];
+  chunkNotInCache: number[];
+};
diff --git a/react-components/src/components/CacheProvider/utils.ts b/react-components/src/components/CacheProvider/utils.ts
index 7befbd370bb..4b12ee628e7 100644
--- a/react-components/src/components/CacheProvider/utils.ts
+++ b/react-components/src/components/CacheProvider/utils.ts
@@ -6,7 +6,8 @@ import {
   type AnnotationsCogniteAnnotationTypesImagesAssetLink,
   type AnnotationModel,
   type AnnotationsBoundingVolume,
-  type CogniteInternalId
+  type CogniteInternalId,
+  type AssetMapping3D
 } from '@cognite/sdk';
 import {
   type ModelRevisionId,
@@ -50,3 +51,7 @@ export function getAssetIdOrExternalIdFromImage360Annotation(
   const annotationData = annotation.data as AnnotationsCogniteAnnotationTypesImagesAssetLink;
   return annotationData.assetRef?.id ?? annotationData.assetRef?.externalId;
 }
+
+export function isValidAssetMapping(assetMapping: AssetMapping3D): assetMapping is AssetMapping3D {
+  return assetMapping.treeIndex !== undefined && assetMapping.subtreeSize !== undefined;
+}
diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx
index fca8f049347..c192f69c964 100644
--- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx
+++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx
@@ -7,7 +7,7 @@ import { useReveal } from '../RevealCanvas/ViewerContext';
 import { Matrix4 } from 'three';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
 import { type CadModelStyling, useApplyCadModelStyling } from './useApplyCadModelStyling';
-import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext';
+import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
 import { isEqual } from 'lodash';
 import { modelExists } from '../../utilities/modelExists';
 import { getViewerResourceCount } from '../../utilities/getViewerResourceCount';
diff --git a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx
index 3543f975581..ab102b4da63 100644
--- a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx
+++ b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx
@@ -15,7 +15,7 @@ import {
   DEFAULT_IMAGE360_ICON_COUNT_LIMIT,
   DEFAULT_IMAGE360_ICON_CULLING_RADIUS
 } from './constants';
-import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext';
+import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
 import { getViewerResourceCount } from '../../utilities/getViewerResourceCount';
 
 type Image360CollectionContainerProps = {
diff --git a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx
index d563aa4707b..70e5ba5e871 100644
--- a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx
+++ b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx
@@ -7,7 +7,7 @@ import { useEffect, type ReactElement, useState, useRef } from 'react';
 import { Matrix4 } from 'three';
 import { useReveal } from '../RevealCanvas/ViewerContext';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
-import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext';
+import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
 import { cloneDeep, isEqual } from 'lodash';
 import {
   useApplyPointCloudStyling,
diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
index 64101a93d34..d44470447a1 100644
--- a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
+++ b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -31,6 +31,12 @@ import {
 import { type ImageCollectionModelStyling } from '../Image360CollectionContainer/useApply360AnnotationStyling';
 import { is360ImageAddOptions } from './typeGuards';
 import { useRemoveNonReferencedModels } from './useRemoveNonReferencedModels';
+import {
+  useAssetMappedNodesForRevisions,
+  useGenerateAssetMappingCachePerItemFromModelCache,
+  useGenerateNode3DCache
+} from '../CacheProvider/AssetMappingAndNode3DCacheProvider';
+import { useReveal3DResourcesStylingLoadingSetter } from './Reveal3DResourcesInfoContext';
 
 export const Reveal3DResources = ({
   resources,
@@ -41,6 +47,7 @@ export const Reveal3DResources = ({
   image360Settings
 }: Reveal3DResourcesProps): ReactElement => {
   const viewer = useReveal();
+
   const [reveal3DModels, setReveal3DModels] = useState<TypedReveal3DModel[]>([]);
 
   const numModelsLoaded = useRef(0);
@@ -62,6 +69,11 @@ export const Reveal3DResources = ({
     [reveal3DModels]
   );
 
+  const { data: assetMappings } = useAssetMappedNodesForRevisions(cadModelOptions);
+
+  useGenerateAssetMappingCachePerItemFromModelCache(cadModelOptions, assetMappings);
+  useGenerateNode3DCache(cadModelOptions, assetMappings);
+
   const pointCloudModelOptions = useMemo(
     () =>
       reveal3DModels.filter(
@@ -70,15 +82,29 @@ export const Reveal3DResources = ({
     [reveal3DModels]
   );
 
-  const styledCadModelOptions = useCalculateCadStyling(
+  const {
+    styledModels: styledCadModelOptions,
+    isModelMappingsFetched,
+    isModelMappingsLoading
+  } = useCalculateCadStyling(
     cadModelOptions,
     instanceStyling?.filter(isCadAssetMappingStylingGroup) ?? EMPTY_ARRAY,
     defaultResourceStyling
   );
 
+  const setModel3DStylingLoading = useReveal3DResourcesStylingLoadingSetter();
+  setModel3DStylingLoading(!(isModelMappingsFetched || !isModelMappingsLoading));
+
+  useEffect(() => {
+    setModel3DStylingLoading(!(isModelMappingsFetched || !isModelMappingsLoading));
+  }, [isModelMappingsFetched, isModelMappingsLoading]);
+
+  const instaceStylingWithAssetMappings =
+    instanceStyling?.filter(isAssetMappingStylingGroup) ?? EMPTY_ARRAY;
+
   const styledPointCloudModelOptions = useCalculatePointCloudStyling(
     pointCloudModelOptions,
-    instanceStyling?.filter(isAssetMappingStylingGroup) ?? EMPTY_ARRAY,
+    instaceStylingWithAssetMappings,
     defaultResourceStyling
   );
 
diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResourcesCountContext.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResourcesCountContext.tsx
deleted file mode 100644
index 9c491173847..00000000000
--- a/react-components/src/components/Reveal3DResources/Reveal3DResourcesCountContext.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/*!
- * Copyright 2023 Cognite AS
- */
-
-import {
-  type ReactElement,
-  createContext,
-  useContext,
-  useState,
-  type ReactNode,
-  useMemo
-} from 'react';
-
-type Reveal3DResourcesCountContent = {
-  reveal3DResourcesCount: number;
-  setRevealResourcesCount: (newCount: number) => void;
-};
-
-const Reveal3DResourcesCountContext = createContext<Reveal3DResourcesCountContent | null>(null);
-
-export const useReveal3DResourcesCount = (): Reveal3DResourcesCountContent => {
-  const element = useContext(Reveal3DResourcesCountContext);
-  if (element === null) {
-    throw new Error(
-      'useReveal3DResourcesCount must be used within a Reveal3DResourcesCountContextProvider'
-    );
-  }
-  return element;
-};
-
-export const Reveal3DResourcesCountContextProvider = ({
-  children
-}: {
-  children: ReactNode;
-}): ReactElement => {
-  const [reveal3DResourcesCount, setRevealResourcesCount] = useState<number>(0);
-  const memoedState = useMemo(
-    () => ({
-      reveal3DResourcesCount,
-      setRevealResourcesCount
-    }),
-    [reveal3DResourcesCount, setRevealResourcesCount]
-  );
-  return (
-    <Reveal3DResourcesCountContext.Provider value={memoedState}>
-      {children}
-    </Reveal3DResourcesCountContext.Provider>
-  );
-};
diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResourcesInfoContext.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResourcesInfoContext.tsx
new file mode 100644
index 00000000000..a8d3101e779
--- /dev/null
+++ b/react-components/src/components/Reveal3DResources/Reveal3DResourcesInfoContext.tsx
@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import {
+  type ReactElement,
+  createContext,
+  useContext,
+  useState,
+  type ReactNode,
+  useMemo
+} from 'react';
+
+type Reveal3DResourcesInfoContent = {
+  reveal3DResourcesCount: number;
+  setRevealResourcesCount: (newCount: number) => void;
+  model3DStylingLoading: boolean;
+  setModel3DStylingLoading: (loading: boolean) => void;
+};
+
+const Reveal3DResourcesInfoContext = createContext<Reveal3DResourcesInfoContent | null>(null);
+
+const getInfoElementOfContext = (): Reveal3DResourcesInfoContent => {
+  const element = useContext(Reveal3DResourcesInfoContext);
+  if (element === null) {
+    throw new Error(
+      'ResourcesInfoContent must be used within a Reveal3DResourcesInfoContextProvider'
+    );
+  }
+  return element;
+};
+
+export const useReveal3DResourcesCount = (): Reveal3DResourcesInfoContent => {
+  const element = getInfoElementOfContext();
+  return element;
+};
+
+export const useReveal3DResourcesStylingLoading = (): boolean => {
+  const element = getInfoElementOfContext();
+  return element.model3DStylingLoading;
+};
+
+export const useReveal3DResourcesStylingLoadingSetter = (): ((value: boolean) => void) => {
+  const element = getInfoElementOfContext();
+  return element.setModel3DStylingLoading;
+};
+
+export const Reveal3DResourcesInfoContextProvider = ({
+  children
+}: {
+  children: ReactNode;
+}): ReactElement => {
+  const [reveal3DResourcesCount, setRevealResourcesCount] = useState<number>(0);
+  const [model3DStylingLoading, setModel3DStylingLoading] = useState<boolean>(false);
+  const memoedState = useMemo(
+    () => ({
+      reveal3DResourcesCount,
+      setRevealResourcesCount,
+      model3DStylingLoading,
+      setModel3DStylingLoading
+    }),
+    [
+      reveal3DResourcesCount,
+      setRevealResourcesCount,
+      model3DStylingLoading,
+      setModel3DStylingLoading
+    ]
+  );
+  return (
+    <Reveal3DResourcesInfoContext.Provider value={memoedState}>
+      {children}
+    </Reveal3DResourcesInfoContext.Provider>
+  );
+};
diff --git a/react-components/src/components/RevealContext/RevealContext.tsx b/react-components/src/components/RevealContext/RevealContext.tsx
index d36be8d6b99..fbc6361497c 100644
--- a/react-components/src/components/RevealContext/RevealContext.tsx
+++ b/react-components/src/components/RevealContext/RevealContext.tsx
@@ -8,9 +8,9 @@ import { type Color } from 'three';
 import { I18nContextProvider } from '../i18n/I18n';
 import { ViewerContext } from '../RevealCanvas/ViewerContext';
 import { NodeCacheProvider } from '../CacheProvider/NodeCacheProvider';
-import { AssetMappingCacheProvider } from '../CacheProvider/AssetMappingCacheProvider';
+import { AssetMappingAndNode3DCacheProvider } from '../CacheProvider/AssetMappingAndNode3DCacheProvider';
 import { PointCloudAnnotationCacheProvider } from '../CacheProvider/PointCloudAnnotationCacheProvider';
-import { Reveal3DResourcesCountContextProvider } from '../Reveal3DResources/Reveal3DResourcesCountContext';
+import { Reveal3DResourcesInfoContextProvider } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
 import { SDKProvider } from '../RevealCanvas/SDKProvider';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
@@ -52,15 +52,15 @@ export const RevealContext = (props: RevealContextProps): ReactElement => {
           <LoadedSceneProvider>
             <ViewerContext.Provider value={viewer}>
               <NodeCacheProvider>
-                <AssetMappingCacheProvider>
+                <AssetMappingAndNode3DCacheProvider>
                   <PointCloudAnnotationCacheProvider>
                     <Image360AnnotationCacheProvider>
-                      <Reveal3DResourcesCountContextProvider>
+                      <Reveal3DResourcesInfoContextProvider>
                         {props.children}
-                      </Reveal3DResourcesCountContextProvider>
+                      </Reveal3DResourcesInfoContextProvider>
                     </Image360AnnotationCacheProvider>
                   </PointCloudAnnotationCacheProvider>
-                </AssetMappingCacheProvider>
+                </AssetMappingAndNode3DCacheProvider>
               </NodeCacheProvider>
             </ViewerContext.Provider>
           </LoadedSceneProvider>
diff --git a/react-components/src/components/RevealKeepAlive/RevealKeepAlive.tsx b/react-components/src/components/RevealKeepAlive/RevealKeepAlive.tsx
index a012b2bf0c9..b0f943d44a1 100644
--- a/react-components/src/components/RevealKeepAlive/RevealKeepAlive.tsx
+++ b/react-components/src/components/RevealKeepAlive/RevealKeepAlive.tsx
@@ -5,7 +5,7 @@
 import { type ReactNode, type ReactElement, useRef, useEffect } from 'react';
 import { RevealKeepAliveContext } from './RevealKeepAliveContext';
 import { type FdmNodeCache } from '../CacheProvider/FdmNodeCache';
-import { type AssetMappingCache } from '../CacheProvider/AssetMappingCache';
+import { type AssetMappingAndNode3DCache } from '../CacheProvider/AssetMappingAndNode3DCache';
 import { type PointCloudAnnotationCache } from '../CacheProvider/PointCloudAnnotationCache';
 import { type Image360AnnotationCache } from '../CacheProvider/Image360AnnotationCache';
 import { type SceneIdentifiers } from '../SceneContainer/sceneTypes';
@@ -16,7 +16,7 @@ export function RevealKeepAlive({ children }: { children?: ReactNode }): ReactEl
   const isRevealContainerMountedRef = useRef<boolean>(false);
   const sceneLoadedRef = useRef<SceneIdentifiers>();
   const fdmNodeCache = useRef<FdmNodeCache>();
-  const assetMappingCache = useRef<AssetMappingCache>();
+  const assetMappingCache = useRef<AssetMappingAndNode3DCache>();
   const pointCloudAnnotationCache = useRef<PointCloudAnnotationCache>();
   const image360AnnotationCache = useRef<Image360AnnotationCache>();
 
diff --git a/react-components/src/components/RevealKeepAlive/RevealKeepAliveContext.ts b/react-components/src/components/RevealKeepAlive/RevealKeepAliveContext.ts
index 529ddb0978f..e57d4e9a896 100644
--- a/react-components/src/components/RevealKeepAlive/RevealKeepAliveContext.ts
+++ b/react-components/src/components/RevealKeepAlive/RevealKeepAliveContext.ts
@@ -3,7 +3,7 @@
  */
 import { type MutableRefObject, createContext, useContext } from 'react';
 import { type FdmNodeCache } from '../CacheProvider/FdmNodeCache';
-import { type AssetMappingCache } from '../CacheProvider/AssetMappingCache';
+import { type AssetMappingAndNode3DCache } from '../CacheProvider/AssetMappingAndNode3DCache';
 import { type PointCloudAnnotationCache } from '../CacheProvider/PointCloudAnnotationCache';
 import { type Image360AnnotationCache } from '../CacheProvider/Image360AnnotationCache';
 import { type SceneIdentifiers } from '../SceneContainer/sceneTypes';
@@ -14,7 +14,7 @@ export type RevealKeepAliveData = {
   isRevealContainerMountedRef: MutableRefObject<boolean>;
   sceneLoadedRef: MutableRefObject<SceneIdentifiers | undefined>;
   fdmNodeCache: MutableRefObject<FdmNodeCache | undefined>;
-  assetMappingCache: MutableRefObject<AssetMappingCache | undefined>;
+  assetMappingCache: MutableRefObject<AssetMappingAndNode3DCache | undefined>;
   pointCloudAnnotationCache: MutableRefObject<PointCloudAnnotationCache | undefined>;
   image360AnnotationCache: MutableRefObject<Image360AnnotationCache | undefined>;
 };
diff --git a/react-components/src/components/RevealToolbar/AssetContextualizedButton.tsx b/react-components/src/components/RevealToolbar/AssetContextualizedButton.tsx
index 6307632d726..2790b0a094a 100644
--- a/react-components/src/components/RevealToolbar/AssetContextualizedButton.tsx
+++ b/react-components/src/components/RevealToolbar/AssetContextualizedButton.tsx
@@ -6,7 +6,7 @@ import { useCallback, useState, type ReactElement } from 'react';
 import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
 import { use3dModels } from '../../hooks/use3dModels';
-import { useAssetMappedNodesForRevisions } from '../CacheProvider/AssetMappingCacheProvider';
+import { useAssetMappedNodesForRevisions } from '../CacheProvider/AssetMappingAndNode3DCacheProvider';
 import { type CadModelOptions } from '../Reveal3DResources/types';
 
 type AssetContextualizedButtonProps = {
diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
index 97f39feb38d..78a750d21d7 100644
--- a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
+++ b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -16,8 +16,13 @@ import { useFetchRuleInstances } from '../RuleBasedOutputs/hooks/useFetchRuleIns
 import { use3dModels } from '../../hooks/use3dModels';
 import { type AssetStylingGroup } from '../..';
 import { type CadModelOptions } from '../Reveal3DResources/types';
-import { useAssetMappedNodesForRevisions } from '../CacheProvider/AssetMappingCacheProvider';
+import { useAssetMappedNodesForRevisions } from '../CacheProvider/AssetMappingAndNode3DCacheProvider';
 import { RuleBasedSelectionItem } from '../RuleBasedOutputs/components/RuleBasedSelectionItem';
+import { generateEmptyRuleForSelection, getRuleBasedById } from '../RuleBasedOutputs/utils';
+import {
+  useReveal3DResourcesStylingLoading,
+  useReveal3DResourcesStylingLoadingSetter
+} from '../Reveal3DResources/Reveal3DResourcesInfoContext';
 
 type RuleBasedOutputsButtonProps = {
   onRuleSetStylingChanged?: (stylings: AssetStylingGroup[] | undefined) => void;
@@ -27,43 +32,62 @@ export const RuleBasedOutputsButton = ({
   onRuleSetStylingChanged,
   onRuleSetSelectedChanged
 }: RuleBasedOutputsButtonProps): ReactElement => {
-  const [currentRuleSetEnabled, setCurrentRuleSetEnabled] = useState<RuleAndEnabled>();
-  const [emptyRuleSelected, setEmptyRuleSelected] = useState<EmptyRuleForSelection>();
-  const [ruleInstances, setRuleInstances] = useState<RuleAndEnabled[] | undefined>();
   const { t } = useTranslation();
   const models = use3dModels();
   const cadModels = models.filter((model) => model.type === 'cad') as CadModelOptions[];
-  const { isLoading } = useAssetMappedNodesForRevisions(cadModels);
 
-  const ruleInstancesResult = useFetchRuleInstances();
+  const [currentRuleSetEnabled, setCurrentRuleSetEnabled] = useState<RuleAndEnabled>();
+  const [emptyRuleSelected, setEmptyRuleSelected] = useState<EmptyRuleForSelection>();
+  const [currentStylingGroups, setCurrentStylingGroups] = useState<
+    AssetStylingGroupAndStyleIndex[] | undefined
+  >();
+  const [ruleInstances, setRuleInstances] = useState<RuleAndEnabled[] | undefined>();
 
-  useEffect(() => {
-    if (ruleInstancesResult.data === undefined) return;
+  const [isRuleLoading, setIsRuleLoading] = useState(false);
+
+  const { isLoading: isAssetMappingsLoading } = useAssetMappedNodesForRevisions(cadModels);
+
+  const [newRuleSetEnabled, setNewRuleSetEnabled] = useState<RuleAndEnabled>();
+  const isRuleLoadingFromContext = useReveal3DResourcesStylingLoading();
+  const setModel3DStylingLoading = useReveal3DResourcesStylingLoadingSetter();
+
+  const { data: ruleInstancesResult } = useFetchRuleInstances();
 
-    setRuleInstances(ruleInstancesResult.data);
+  useEffect(() => {
+    setRuleInstances(ruleInstancesResult);
   }, [ruleInstancesResult]);
 
+  useEffect(() => {
+    setCurrentRuleSetEnabled(newRuleSetEnabled);
+    if (onRuleSetSelectedChanged !== undefined) onRuleSetSelectedChanged(newRuleSetEnabled);
+
+    const hasNewRuleSetEnabled = newRuleSetEnabled !== undefined;
+
+    setIsRuleLoading(hasNewRuleSetEnabled);
+    setModel3DStylingLoading(hasNewRuleSetEnabled);
+  }, [newRuleSetEnabled]);
+
+  useEffect(() => {
+    const hasRuleLoading =
+      currentStylingGroups !== undefined &&
+      currentStylingGroups.length > 0 &&
+      isRuleLoadingFromContext;
+    setIsRuleLoading(hasRuleLoading);
+    setModel3DStylingLoading(hasRuleLoading);
+  }, [isRuleLoadingFromContext, currentStylingGroups]);
+
   const onChange = useCallback(
     (data: string | undefined): void => {
+      const emptySelection = generateEmptyRuleForSelection(
+        t('RULESET_NO_SELECTION', 'No RuleSet selected')
+      );
+
       ruleInstances?.forEach((item) => {
         if (item === undefined) return;
         item.isEnabled = false;
       });
 
-      const emptySelection: EmptyRuleForSelection = {
-        rule: {
-          properties: {
-            id: undefined,
-            name: t('RULESET_NO_SELECTION', 'No RuleSet selected'),
-            isNoSelection: true
-          }
-        },
-        isEnabled: false
-      };
-
-      const selectedRule = ruleInstances?.find((item) => {
-        return item?.rule?.properties.id === data;
-      });
+      const selectedRule = getRuleBasedById(data, ruleInstances);
 
       if (selectedRule !== undefined) {
         selectedRule.isEnabled = true;
@@ -72,10 +96,10 @@ export const RuleBasedOutputsButton = ({
         if (onRuleSetStylingChanged !== undefined) onRuleSetStylingChanged(undefined);
       }
 
-      if (onRuleSetSelectedChanged !== undefined) onRuleSetSelectedChanged(selectedRule);
-
       setEmptyRuleSelected(emptySelection);
-      setCurrentRuleSetEnabled(selectedRule);
+      setNewRuleSetEnabled(selectedRule);
+      setIsRuleLoading(true);
+      setModel3DStylingLoading(true);
     },
     [ruleInstances, onRuleSetStylingChanged, onRuleSetSelectedChanged]
   );
@@ -83,6 +107,7 @@ export const RuleBasedOutputsButton = ({
   const ruleSetStylingChanged = (
     stylingGroups: AssetStylingGroupAndStyleIndex[] | undefined
   ): void => {
+    setCurrentStylingGroups(stylingGroups);
     const assetStylingGroups = stylingGroups?.map((group) => group.assetStylingGroup);
     if (onRuleSetStylingChanged !== undefined) onRuleSetStylingChanged(assetStylingGroups);
   };
@@ -99,7 +124,7 @@ export const RuleBasedOutputsButton = ({
         appendTo={document.body}>
         <Dropdown
           placement="right-start"
-          disabled={isLoading}
+          disabled={isAssetMappingsLoading}
           content={
             <Menu
               style={{
@@ -114,6 +139,8 @@ export const RuleBasedOutputsButton = ({
                 label={t('RULESET_NO_SELECTION', 'No RuleSet selected')}
                 checked={currentRuleSetEnabled === undefined || emptyRuleSelected?.isEnabled}
                 onChange={onChange}
+                isLoading={isRuleLoading}
+                isEmptyRuleItem={true}
               />
               {ruleInstances?.map((item) => (
                 <RuleBasedSelectionItem
@@ -122,11 +149,18 @@ export const RuleBasedOutputsButton = ({
                   label={item?.rule?.properties.name}
                   checked={item?.isEnabled}
                   onChange={onChange}
+                  isLoading={isRuleLoading}
+                  isEmptyRuleItem={false}
                 />
               ))}
             </Menu>
           }>
-          <Button icon="ColorPalette" aria-label="Select RuleSet" type="ghost" />
+          <Button
+            disabled={isAssetMappingsLoading}
+            icon="ColorPalette"
+            aria-label="Select RuleSet"
+            type="ghost"
+          />
         </Dropdown>
       </CogsTooltip>
       {ruleInstances !== undefined && ruleInstances?.length > 0 && (
diff --git a/react-components/src/components/RuleBasedOutputs/RuleBasedOutputsSelector.tsx b/react-components/src/components/RuleBasedOutputs/RuleBasedOutputsSelector.tsx
index fd0b089f344..8173c898fa3 100644
--- a/react-components/src/components/RuleBasedOutputs/RuleBasedOutputsSelector.tsx
+++ b/react-components/src/components/RuleBasedOutputs/RuleBasedOutputsSelector.tsx
@@ -1,25 +1,31 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-import { useEffect, type ReactElement, useState, useMemo } from 'react';
+import { useEffect, type ReactElement, useState } from 'react';
 
 import { CogniteCadModel } from '@cognite/reveal';
-import { type ModelMappingsWithAssets, useAllMappedEquipmentAssetMappings } from '../..';
 import { type RuleOutputSet, type AssetStylingGroupAndStyleIndex } from './types';
-import { generateRuleBasedOutputs, traverseExpressionToGetTimeseries } from './utils';
+import { generateRuleBasedOutputs } from './utils';
 import { use3dModels } from '../../hooks/use3dModels';
-import { EMPTY_ARRAY } from '../../utilities/constants';
-import { type Datapoints, type Asset } from '@cognite/sdk';
+import { type Datapoints, type Asset, type AssetMapping3D } from '@cognite/sdk';
 import { isDefined } from '../../utilities/isDefined';
-import { type InfiniteData } from '@tanstack/react-query';
 import { type AssetIdsAndTimeseries } from '../../utilities/types';
 import { useAssetsAndTimeseriesLinkageDataQuery } from '../../query/useAssetsAndTimeseriesLinkageDataQuery';
+import { useAssetMappedNodesForRevisions } from '../CacheProvider/AssetMappingAndNode3DCacheProvider';
+import { type CadModelOptions } from '../Reveal3DResources/types';
+import { useAssetsByIdsQuery } from '../../query/useAssetsByIdsQuery';
+import { useCreateAssetMappingsMapPerModel } from '../../hooks/useCreateAssetMappingsMapPerModel';
+import { useExtractUniqueAssetIdsFromMapped } from './hooks/useExtractUniqueAssetIdsFromMapped';
+import { useConvertAssetMetadatasToLowerCase } from './hooks/useConvertAssetMetadatasToLowerCase';
+import { useExtractTimeseriesIdsFromRuleSet } from './hooks/useExtractTimeseriesIdsFromRuleSet';
 
 export type ColorOverlayProps = {
   ruleSet: RuleOutputSet | undefined;
   onRuleSetChanged?: (currentStylings: AssetStylingGroupAndStyleIndex[] | undefined) => void;
 };
 
+const ruleSetStylingCache = new Map<string, AssetStylingGroupAndStyleIndex[]>();
+
 export function RuleBasedOutputsSelector({
   ruleSet,
   onRuleSetChanged
@@ -28,36 +34,29 @@ export function RuleBasedOutputsSelector({
 
   const models = use3dModels();
 
-  const [stylingGroups, setStylingsGroups] = useState<AssetStylingGroupAndStyleIndex[]>();
+  const [allContextualizedAssets, setAllContextualizedAssets] = useState<Asset[]>();
+
+  const cadModels: CadModelOptions[] = models
+    .filter((model) => model instanceof CogniteCadModel)
+    .map((model) => {
+      return { type: 'cad', modelId: model.modelId, revisionId: model.revisionId };
+    });
+
+  const { data: assetMappings } = useAssetMappedNodesForRevisions(cadModels);
+
+  const assetIdsFromMapped = useExtractUniqueAssetIdsFromMapped(assetMappings);
 
-  const {
-    data: assetMappings,
-    isFetching,
-    hasNextPage,
-    fetchNextPage
-  } = useAllMappedEquipmentAssetMappings(models);
+  const { data: mappedAssets, isFetched } = useAssetsByIdsQuery(assetIdsFromMapped);
 
   useEffect(() => {
-    if (!isFetching && (hasNextPage ?? false)) {
-      void fetchNextPage();
+    if (isFetched) {
+      setAllContextualizedAssets(mappedAssets);
     }
-  }, [isFetching, hasNextPage, fetchNextPage]);
-
-  const contextualizedAssetNodes = useMemo(() => {
-    return (
-      assetMappings?.pages
-        .flat()
-        .flatMap((item) => item.assets)
-        .map(convertAssetMetadataKeysToLowerCase) ?? []
-    );
-  }, [assetMappings]);
-
-  const timeseriesExternalIds = useMemo(() => {
-    const expressions = ruleSet?.rulesWithOutputs
-      .map((ruleWithOutput) => ruleWithOutput.rule.expression)
-      .filter(isDefined);
-    return traverseExpressionToGetTimeseries(expressions) ?? [];
-  }, [ruleSet]);
+  }, [mappedAssets, isFetched]);
+
+  const contextualizedAssetNodes = useConvertAssetMetadatasToLowerCase(allContextualizedAssets);
+
+  const timeseriesExternalIds = useExtractTimeseriesIdsFromRuleSet(ruleSet);
 
   const { isLoading: isLoadingAssetIdsAndTimeseriesData, data: assetIdsWithTimeseriesData } =
     useAssetsAndTimeseriesLinkageDataQuery({
@@ -65,60 +64,67 @@ export function RuleBasedOutputsSelector({
       contextualizedAssetNodes
     });
 
-  useEffect(() => {
-    if (onRuleSetChanged !== undefined) onRuleSetChanged(stylingGroups);
-  }, [stylingGroups]);
+  const flatAssetsMappingsListPerModel = useCreateAssetMappingsMapPerModel(models, assetMappings);
 
   useEffect(() => {
-    if (assetMappings === undefined || models === undefined || isFetching) return;
+    if (assetMappings === undefined || models === undefined || !isFetched) return;
     if (timeseriesExternalIds.length > 0 && isLoadingAssetIdsAndTimeseriesData) return;
-
-    setStylingsGroups(EMPTY_ARRAY);
-
     if (ruleSet === undefined) return;
 
-    models.forEach(async (model) => {
-      if (!(model instanceof CogniteCadModel)) {
-        return;
-      }
-      setStylingsGroups(
-        await initializeRuleBasedOutputs({
-          model,
-          assetMappings,
-          contextualizedAssetNodes,
-          ruleSet,
-          assetIdsAndTimeseries: assetIdsWithTimeseriesData?.assetIdsWithTimeseries ?? [],
-          timeseriesDatapoints: assetIdsWithTimeseriesData?.timeseriesDatapoints ?? []
+    const ruleBasedInitilization = async (): Promise<void> => {
+      const allStylings = await Promise.all(
+        models.map(async (model) => {
+          if (!(model instanceof CogniteCadModel)) {
+            return;
+          }
+
+          const flatAssetsMappingsList = flatAssetsMappingsListPerModel.get(model) ?? [];
+
+          if (flatAssetsMappingsList.length === 0) return [];
+          const stylings = await initializeRuleBasedOutputs({
+            assetMappings: flatAssetsMappingsList,
+            contextualizedAssetNodes,
+            ruleSet,
+            assetIdsAndTimeseries: assetIdsWithTimeseriesData?.assetIdsWithTimeseries ?? [],
+            timeseriesDatapoints: assetIdsWithTimeseriesData?.timeseriesDatapoints ?? []
+          });
+          const filteredStylings = stylings.flat().filter(isDefined);
+          return filteredStylings;
         })
       );
-    });
-  }, [isLoadingAssetIdsAndTimeseriesData, ruleSet]);
+      const filteredStylings = allStylings.flat().filter(isDefined).flat();
+      ruleSetStylingCache.set(ruleSet.id, filteredStylings);
+
+      if (onRuleSetChanged !== undefined) {
+        onRuleSetChanged(filteredStylings);
+      }
+    };
+    if (!ruleSetStylingCache.has(ruleSet.id)) {
+      void ruleBasedInitilization();
+    } else {
+      if (onRuleSetChanged !== undefined) onRuleSetChanged(ruleSetStylingCache.get(ruleSet.id));
+    }
+  }, [isLoadingAssetIdsAndTimeseriesData, ruleSet, assetMappings, allContextualizedAssets]);
 
   return <></>;
 }
 
 async function initializeRuleBasedOutputs({
-  model,
   assetMappings,
   contextualizedAssetNodes,
   ruleSet,
   assetIdsAndTimeseries,
   timeseriesDatapoints
 }: {
-  model: CogniteCadModel;
-  assetMappings: InfiniteData<ModelMappingsWithAssets[]>;
+  assetMappings: AssetMapping3D[];
   contextualizedAssetNodes: Asset[];
   ruleSet: RuleOutputSet;
   assetIdsAndTimeseries: AssetIdsAndTimeseries[];
   timeseriesDatapoints: Datapoints[] | undefined;
 }): Promise<AssetStylingGroupAndStyleIndex[]> {
-  const flatAssetsMappingsList = assetMappings.pages.flat().flatMap((item) => item.mappings);
-  const flatMappings = flatAssetsMappingsList.flatMap((node) => node.items);
-
   const collectionStylings = await generateRuleBasedOutputs({
-    model,
     contextualizedAssetNodes,
-    assetMappings: flatMappings,
+    assetMappings,
     ruleSet,
     assetIdsAndTimeseries,
     timeseriesDatapoints
@@ -126,14 +132,3 @@ async function initializeRuleBasedOutputs({
 
   return collectionStylings;
 }
-
-function convertAssetMetadataKeysToLowerCase(asset: Asset): Asset {
-  return {
-    ...asset,
-    metadata: Object.fromEntries(
-      [...Object.entries(asset.metadata ?? {})].map(
-        ([key, value]) => [key.toLowerCase(), value] as const
-      )
-    )
-  };
-}
diff --git a/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx b/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx
index b78ea59ffaf..efb810e4650 100644
--- a/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx
+++ b/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx
@@ -3,6 +3,7 @@
  */
 import { Flex, Icon, Menu, Radio } from '@cognite/cogs.js';
 import { type ReactElement } from 'react';
+import styled from 'styled-components';
 
 type RuleBasedSelectionItemProps = {
   onChange: (value: string | undefined) => void;
@@ -10,13 +11,17 @@ type RuleBasedSelectionItemProps = {
   id: string;
   checked: boolean | undefined;
   key: string;
+  isLoading: boolean;
+  isEmptyRuleItem: boolean;
 };
 export const RuleBasedSelectionItem = ({
   onChange,
   label,
   key,
   id,
-  checked
+  checked,
+  isLoading,
+  isEmptyRuleItem
 }: RuleBasedSelectionItemProps): ReactElement => {
   return (
     <Menu.Item
@@ -24,13 +29,21 @@ export const RuleBasedSelectionItem = ({
         onChange(id);
       }}
       key={key}>
-      <Flex justifyContent="space-between" alignItems="center" gap={8}>
+      <StyledFlex justifyContent="space-between" alignItems="center" gap={8}>
         <Flex gap={4} alignItems="center">
           <Icon type="ColorPalette" />
           {label}
         </Flex>
-        <Radio name={id ?? ''} value={id} checked={checked} />
-      </Flex>
+        {!isEmptyRuleItem && isLoading && checked === true ? (
+          <Icon type="Loader" />
+        ) : (
+          <Radio name={id ?? ''} value={id} checked={checked} />
+        )}
+      </StyledFlex>
     </Menu.Item>
   );
 };
+
+const StyledFlex = styled(Flex)`
+  min-height: 24px;
+`;
diff --git a/react-components/src/components/RuleBasedOutputs/hooks/useConvertAssetMetadatasToLowerCase.tsx b/react-components/src/components/RuleBasedOutputs/hooks/useConvertAssetMetadatasToLowerCase.tsx
new file mode 100644
index 00000000000..7ceb04f63ed
--- /dev/null
+++ b/react-components/src/components/RuleBasedOutputs/hooks/useConvertAssetMetadatasToLowerCase.tsx
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { useMemo } from 'react';
+import { isDefined } from '../../../utilities/isDefined';
+import { convertAssetMetadataKeysToLowerCase } from '../../../utilities/convertAssetMetadataToLowerCase';
+import { type Asset } from '@cognite/sdk';
+
+export const useConvertAssetMetadatasToLowerCase = (assets: Asset[] | undefined): Asset[] => {
+  const convertedAssetNodesWithLowerCasedMetadata = useMemo(() => {
+    const convertedAssetNodes = assets?.filter(isDefined).map(convertAssetMetadataKeysToLowerCase);
+
+    return convertedAssetNodes ?? [];
+  }, [assets]);
+
+  return convertedAssetNodesWithLowerCasedMetadata;
+};
diff --git a/react-components/src/components/RuleBasedOutputs/hooks/useExtractTimeseriesIdsFromRuleSet.tsx b/react-components/src/components/RuleBasedOutputs/hooks/useExtractTimeseriesIdsFromRuleSet.tsx
new file mode 100644
index 00000000000..caf21e40228
--- /dev/null
+++ b/react-components/src/components/RuleBasedOutputs/hooks/useExtractTimeseriesIdsFromRuleSet.tsx
@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { useMemo } from 'react';
+import { type RuleOutputSet } from '../types';
+import { traverseExpressionToGetTimeseries } from '../utils';
+import { isDefined } from '../../../utilities/isDefined';
+
+export const useExtractTimeseriesIdsFromRuleSet = (ruleSet: RuleOutputSet): string[] => {
+  return useMemo(() => {
+    const expressions = ruleSet?.rulesWithOutputs
+      .map((ruleWithOutput) => ruleWithOutput.rule.expression)
+      .filter(isDefined);
+    return traverseExpressionToGetTimeseries(expressions) ?? [];
+  }, [ruleSet]);
+};
diff --git a/react-components/src/components/RuleBasedOutputs/hooks/useExtractUniqueAssetIdsFromMapped.tsx b/react-components/src/components/RuleBasedOutputs/hooks/useExtractUniqueAssetIdsFromMapped.tsx
new file mode 100644
index 00000000000..60c65908077
--- /dev/null
+++ b/react-components/src/components/RuleBasedOutputs/hooks/useExtractUniqueAssetIdsFromMapped.tsx
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type InternalId } from '@cognite/sdk';
+import { type ModelWithAssetMappings } from '../../CacheProvider/AssetMappingAndNode3DCacheProvider';
+import { useMemo } from 'react';
+import { uniqBy } from 'lodash';
+
+export const useExtractUniqueAssetIdsFromMapped = (
+  assetMappings: ModelWithAssetMappings[] | undefined
+): InternalId[] => {
+  return useMemo(() => {
+    const mappings = assetMappings?.map((item) => item.assetMappings).flat() ?? [];
+    const assetIds: InternalId[] = mappings.flatMap((item) => {
+      return {
+        id: item.assetId
+      };
+    });
+    const uniqueAssetIds = uniqBy(assetIds, 'id');
+    return uniqueAssetIds;
+  }, [assetMappings]);
+};
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({
diff --git a/react-components/src/components/RuleBasedOutputs/utils.ts b/react-components/src/components/RuleBasedOutputs/utils.ts
index 03f17090ff0..ac7753b20aa 100644
--- a/react-components/src/components/RuleBasedOutputs/utils.ts
+++ b/react-components/src/components/RuleBasedOutputs/utils.ts
@@ -6,7 +6,6 @@ import { Color } from 'three';
 import {
   type StringExpression,
   type ColorRuleOutput,
-  type NodeAndRange,
   type RuleOutput,
   type NumericExpression,
   type MetadataRuleTrigger,
@@ -19,13 +18,11 @@ import {
   type TriggerType,
   type RuleWithOutputs,
   type TriggerTypeData,
-  type TimeseriesAndDatapoints
+  type TimeseriesAndDatapoints,
+  type EmptyRuleForSelection,
+  type RuleAndEnabled
 } from './types';
-import {
-  type CogniteCadModel,
-  TreeIndexNodeCollection,
-  type NodeAppearance
-} from '@cognite/reveal';
+import { NumericRange, TreeIndexNodeCollection, type NodeAppearance } from '@cognite/reveal';
 import { type AssetMapping3D, type Asset, type Datapoints } from '@cognite/sdk';
 import { type AssetStylingGroup } from '../Reveal3DResources/types';
 import { isDefined } from '../../utilities/isDefined';
@@ -270,14 +267,12 @@ function getExpressionTriggerTypes(expression: Expression): TriggerType[] {
 }
 
 export const generateRuleBasedOutputs = async ({
-  model,
   contextualizedAssetNodes,
   assetMappings,
   ruleSet,
   assetIdsAndTimeseries,
   timeseriesDatapoints
 }: {
-  model: CogniteCadModel;
   contextualizedAssetNodes: Asset[];
   assetMappings: AssetMapping3D[];
   ruleSet: RuleOutputSet;
@@ -307,7 +302,6 @@ export const generateRuleBasedOutputs = async ({
         if (outputSelected === undefined) return;
 
         return await analyzeNodesAgainstExpression({
-          model,
           contextualizedAssetNodes,
           assetIdsAndTimeseries,
           timeseriesDatapoints,
@@ -339,7 +333,6 @@ const getRuleOutputFromTypeSelected = (
 };
 
 const analyzeNodesAgainstExpression = async ({
-  model,
   contextualizedAssetNodes,
   assetIdsAndTimeseries,
   timeseriesDatapoints,
@@ -347,7 +340,6 @@ const analyzeNodesAgainstExpression = async ({
   expression,
   outputSelected
 }: {
-  model: CogniteCadModel;
   contextualizedAssetNodes: Asset[];
   assetIdsAndTimeseries: AssetIdsAndTimeseries[];
   timeseriesDatapoints: Datapoints[] | undefined;
@@ -366,38 +358,38 @@ const analyzeNodesAgainstExpression = async ({
 
       triggerData.push(metadataTriggerData);
 
-      const timeseriesDataForThisAsset = generateTimeseriesAndDatapointsFromTheAsset({
-        contextualizedAssetNode,
-        assetIdsAndTimeseries,
-        timeseriesDatapoints
-      });
+      if (
+        timeseriesDatapoints !== undefined &&
+        timeseriesDatapoints.length > 0 &&
+        assetIdsAndTimeseries !== undefined &&
+        assetIdsAndTimeseries.length > 0
+      ) {
+        const timeseriesDataForThisAsset = generateTimeseriesAndDatapointsFromTheAsset({
+          contextualizedAssetNode,
+          assetIdsAndTimeseries,
+          timeseriesDatapoints
+        });
 
-      if (timeseriesDataForThisAsset.length > 0) {
-        const timeseriesTriggerData: TriggerTypeData = {
-          type: 'timeseries',
-          timeseries: {
-            timeseriesWithDatapoints: timeseriesDataForThisAsset,
-            linkedAssets: contextualizedAssetNode
-          }
-        };
+        if (timeseriesDataForThisAsset.length > 0) {
+          const timeseriesTriggerData: TriggerTypeData = {
+            type: 'timeseries',
+            timeseries: {
+              timeseriesWithDatapoints: timeseriesDataForThisAsset,
+              linkedAssets: contextualizedAssetNode
+            }
+          };
 
-        triggerData.push(timeseriesTriggerData);
+          triggerData.push(timeseriesTriggerData);
+        }
       }
 
       const finalGlobalOutputResult = traverseExpression(triggerData, [expression]);
 
       if (finalGlobalOutputResult[0] ?? false) {
         const nodesFromThisAsset = assetMappings.filter(
-          (mapping) => mapping.assetId === contextualizedAssetNode.id
+          (item) => item.assetId === contextualizedAssetNode.id
         );
-
-        // get the 3d nodes linked to the asset and with treeindex and subtreeRange
-        const nodesAndRange: NodeAndRange[] = await getThreeDNodesFromAsset(
-          nodesFromThisAsset,
-          model
-        );
-
-        return nodesAndRange;
+        return nodesFromThisAsset;
       }
     })
   );
@@ -466,26 +458,8 @@ export const traverseExpressionToGetTimeseries = (
   return timeseriesExternalIdResults;
 };
 
-const getThreeDNodesFromAsset = async (
-  nodesFromThisAsset: AssetMapping3D[],
-  model: CogniteCadModel
-): Promise<NodeAndRange[]> => {
-  return await Promise.all(
-    nodesFromThisAsset.map(async (nodeFromAsset) => {
-      const subtreeRange = await model.getSubtreeTreeIndices(nodeFromAsset.treeIndex);
-      const node: NodeAndRange = {
-        nodeId: nodeFromAsset.nodeId,
-        treeIndex: nodeFromAsset.treeIndex,
-        subtreeRange,
-        assetId: nodeFromAsset.assetId
-      };
-      return node;
-    })
-  );
-};
-
 const applyNodeStyles = (
-  treeNodes: NodeAndRange[],
+  treeNodes: AssetMapping3D[],
   outputSelected: ColorRuleOutput
 ): AssetStylingGroupAndStyleIndex => {
   const ruleOutputAndStyleIndex: RuleAndStyleIndex = {
@@ -494,9 +468,12 @@ const applyNodeStyles = (
   };
 
   const nodeIndexSet = ruleOutputAndStyleIndex.styleIndex.getIndexSet();
-  treeNodes.forEach((node) => {
-    nodeIndexSet.addRange(node.subtreeRange);
+  nodeIndexSet.clear();
+  treeNodes?.forEach((node) => {
+    const range = new NumericRange(node.treeIndex, node.subtreeSize);
+    nodeIndexSet.addRange(range);
   });
+  ruleOutputAndStyleIndex.styleIndex.updateSet(nodeIndexSet);
 
   const nodeAppearance: NodeAppearance = {
     color: new Color(outputSelected.fill)
@@ -526,3 +503,24 @@ const convertExpressionStringMetadataKeyToLowerCase = (expression: Expression):
 
   expression.trigger.key = expression.trigger.key.toLowerCase();
 };
+
+export const generateEmptyRuleForSelection = (name: string): EmptyRuleForSelection => {
+  const emptySelection: EmptyRuleForSelection = {
+    rule: {
+      properties: {
+        id: undefined,
+        name,
+        isNoSelection: true
+      }
+    },
+    isEnabled: false
+  };
+  return emptySelection;
+};
+
+export const getRuleBasedById = (
+  id: string | undefined,
+  ruleInstances: RuleAndEnabled[] | undefined
+): RuleAndEnabled | undefined => {
+  return ruleInstances?.find((item) => item.rule.properties.id === id);
+};
diff --git a/react-components/src/hooks/use3dModels.ts b/react-components/src/hooks/use3dModels.ts
index 31fe6187f5a..97670fc0933 100644
--- a/react-components/src/hooks/use3dModels.ts
+++ b/react-components/src/hooks/use3dModels.ts
@@ -3,7 +3,7 @@
  */
 
 import { useMemo } from 'react';
-import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesCountContext';
+import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesInfoContext';
 import { type CogniteModel } from '@cognite/reveal';
 import { useReveal } from '../components/RevealCanvas/ViewerContext';
 
diff --git a/react-components/src/hooks/useCalculateModelsStyling.tsx b/react-components/src/hooks/useCalculateModelsStyling.tsx
index 84441fa769b..9d303c2f584 100644
--- a/react-components/src/hooks/useCalculateModelsStyling.tsx
+++ b/react-components/src/hooks/useCalculateModelsStyling.tsx
@@ -9,7 +9,7 @@ import {
 } from '../components/Reveal3DResources/types';
 import { NumericRange, type NodeAppearance, IndexSet } from '@cognite/reveal';
 import { type ThreeDModelFdmMappings } from './types';
-import { type Node3D, type CogniteExternalId } from '@cognite/sdk';
+import { type Node3D, type CogniteExternalId, type AssetMapping3D } from '@cognite/sdk';
 import {
   useFdmAssetMappings,
   useMappedEdgesForRevisions
@@ -25,11 +25,10 @@ import {
   type NodeStylingGroup,
   type TreeIndexStylingGroup
 } from '../components/CadModelContainer/useApplyCadModelStyling';
-import { type AssetMapping } from '../components/CacheProvider/AssetMappingCache';
 import {
   useAssetMappedNodesForRevisions,
   useNodesForAssets
-} from '../components/CacheProvider/AssetMappingCacheProvider';
+} from '../components/CacheProvider/AssetMappingAndNode3DCacheProvider';
 import { isSameModel } from '../utilities/isSameModel';
 import { isAssetMappingStylingGroup, isFdmAssetStylingGroup } from '../utilities/StylingGroupUtils';
 
@@ -38,6 +37,18 @@ type ModelStyleGroup = {
   styleGroup: Array<NodeStylingGroup | TreeIndexStylingGroup>;
 };
 
+type ModelStyleGroupWithMappingsFetched = {
+  combinedMappedStyleGroups: ModelStyleGroup[];
+  isModelMappingsFetched: boolean;
+  isModelMappingsLoading: boolean;
+};
+
+type StyledModelWithMappingsFetched = {
+  styledModels: StyledModel[];
+  isModelMappingsFetched: boolean;
+  isModelMappingsLoading: boolean;
+};
+
 export type CadStyleGroup = NodeStylingGroup | TreeIndexStylingGroup;
 
 export type StyledModel = {
@@ -49,25 +60,32 @@ export const useCalculateCadStyling = (
   models: CadModelOptions[],
   instanceGroups: Array<FdmAssetStylingGroup | AssetStylingGroup>,
   defaultResourceStyling?: DefaultResourceStyling
-): StyledModel[] => {
+): StyledModelWithMappingsFetched => {
   const modelsMappedStyleGroups = useCalculateMappedStyling(
     models,
     defaultResourceStyling?.cad?.mapped
   );
-  const modelInstanceStyleGroups = useCalculateInstanceStyling(models, instanceGroups);
+  const modelInstanceStyleGroupsAndMappingFetched = useCalculateInstanceStyling(
+    models,
+    instanceGroups
+  );
 
   const joinedStyleGroups = useJoinStylingGroups(
     models,
-    modelsMappedStyleGroups,
-    modelInstanceStyleGroups
+    modelsMappedStyleGroups.combinedMappedStyleGroups,
+    modelInstanceStyleGroupsAndMappingFetched.combinedMappedStyleGroups
   );
-  return joinedStyleGroups;
+  return {
+    styledModels: joinedStyleGroups,
+    isModelMappingsFetched: modelInstanceStyleGroupsAndMappingFetched.isModelMappingsFetched,
+    isModelMappingsLoading: modelInstanceStyleGroupsAndMappingFetched.isModelMappingsLoading
+  };
 };
 
 function useCalculateMappedStyling(
   models: CadModelOptions[],
   defaultMappedNodeAppearance?: NodeAppearance
-): ModelStyleGroup[] {
+): ModelStyleGroupWithMappingsFetched {
   const modelsRevisionsWithMappedEquipment = useMemo(
     () => getMappedCadModelsOptions(),
     [models, defaultMappedNodeAppearance]
@@ -75,8 +93,11 @@ function useCalculateMappedStyling(
   const { data: mappedEquipmentEdges, isLoading: isFDMEquipmentMappingLoading } =
     useMappedEdgesForRevisions(modelsRevisionsWithMappedEquipment);
 
-  const { data: assetMappingData, isLoading: isAssetMappingLoading } =
-    useAssetMappedNodesForRevisions(modelsRevisionsWithMappedEquipment);
+  const {
+    data: assetMappingData,
+    isFetched: isModelMappingsFetched,
+    isLoading: isModelMappingsLoading
+  } = useAssetMappedNodesForRevisions(modelsRevisionsWithMappedEquipment);
 
   const modelsMappedFdmStyleGroups = useMemo(() => {
     const isFdmMappingUnavailableOrLoading =
@@ -109,7 +130,7 @@ function useCalculateMappedStyling(
       models.length === 0 ||
       assetMappingData === undefined ||
       assetMappingData.length === 0 ||
-      isAssetMappingLoading;
+      isModelMappingsLoading;
 
     if (isAssetMappingUnavailableOrLoading) {
       return [];
@@ -128,7 +149,7 @@ function useCalculateMappedStyling(
     modelsRevisionsWithMappedEquipment,
     assetMappingData,
     defaultMappedNodeAppearance,
-    isAssetMappingLoading
+    isModelMappingsLoading
   ]);
 
   const combinedMappedStyleGroups = useMemo(
@@ -140,7 +161,11 @@ function useCalculateMappedStyling(
     [modelsMappedAssetStyleGroups, modelsMappedFdmStyleGroups]
   );
 
-  return combinedMappedStyleGroups;
+  return {
+    combinedMappedStyleGroups,
+    isModelMappingsFetched,
+    isModelMappingsLoading
+  };
 
   function getMappedCadModelsOptions(): CadModelOptions[] {
     if (defaultMappedNodeAppearance !== undefined) {
@@ -154,7 +179,7 @@ function useCalculateMappedStyling(
 function useCalculateInstanceStyling(
   models: CadModelOptions[],
   instanceGroups: Array<FdmAssetStylingGroup | AssetStylingGroup>
-): ModelStyleGroup[] {
+): ModelStyleGroupWithMappingsFetched {
   const { data: fdmAssetMappings } = useFdmAssetMappings(
     instanceGroups
       .filter(isFdmAssetStylingGroup)
@@ -162,12 +187,15 @@ function useCalculateInstanceStyling(
     models
   );
 
-  const { data: modelAssetMappings } = useNodesForAssets(
-    models,
-    instanceGroups
-      .filter(isAssetMappingStylingGroup)
-      .flatMap((instanceGroup) => instanceGroup.assetIds)
-  );
+  const assetIdsFromInstanceGroups = instanceGroups
+    .filter(isAssetMappingStylingGroup)
+    .flatMap((instanceGroup) => instanceGroup.assetIds);
+
+  const {
+    data: modelAssetMappings,
+    isFetched: isModelMappingsFetched,
+    isLoading: isModelMappingsLoading
+  } = useNodesForAssets(models, assetIdsFromInstanceGroups);
 
   const fdmModelInstanceStyleGroups = useFdmInstanceStyleGroups(
     models,
@@ -190,7 +218,11 @@ function useCalculateInstanceStyling(
     [fdmModelInstanceStyleGroups, assetMappingInstanceStyleGroups]
   );
 
-  return combinedMappedStyleGroups;
+  return {
+    combinedMappedStyleGroups,
+    isModelMappingsFetched,
+    isModelMappingsLoading
+  };
 }
 
 function useAssetMappingInstanceStyleGroups(
@@ -300,7 +332,7 @@ function getMappedStyleGroupFromFdm(
 }
 
 function getMappedStyleGroupFromAssetMappings(
-  assetMappings: AssetMapping[],
+  assetMappings: AssetMapping3D[],
   nodeAppearance: NodeAppearance
 ): TreeIndexStylingGroup {
   const indexSet = new IndexSet();
diff --git a/react-components/src/hooks/useClickedNode.tsx b/react-components/src/hooks/useClickedNode.tsx
index 8a825950289..4f65043ef6d 100644
--- a/react-components/src/hooks/useClickedNode.tsx
+++ b/react-components/src/hooks/useClickedNode.tsx
@@ -11,8 +11,8 @@ import { useEffect, useState } from 'react';
 import { useFdm3dNodeDataPromises } from '../components/CacheProvider/NodeCacheProvider';
 import { type CogniteInternalId, type Node3D } from '@cognite/sdk';
 import { type FdmNodeDataPromises } from '../components/CacheProvider/types';
-import { useAssetMappingForTreeIndex } from '../components/CacheProvider/AssetMappingCacheProvider';
-import { type NodeAssetMappingResult } from '../components/CacheProvider/AssetMappingCache';
+import { useAssetMappingForTreeIndex } from '../components/CacheProvider/AssetMappingAndNode3DCacheProvider';
+import { type NodeAssetMappingResult } from '../components/CacheProvider/AssetMappingAndNode3DCache';
 import { usePointCloudAnnotationMappingForAssetId } from '../components/CacheProvider/PointCloudAnnotationCacheProvider';
 import { type PointCloudAnnotationMappedAssetData } from './types';
 import { MOUSE, Vector2 } from 'three';
diff --git a/react-components/src/hooks/useCreateAssetMappingsMapPerModel.tsx b/react-components/src/hooks/useCreateAssetMappingsMapPerModel.tsx
new file mode 100644
index 00000000000..0a6203a4951
--- /dev/null
+++ b/react-components/src/hooks/useCreateAssetMappingsMapPerModel.tsx
@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { CogniteCadModel, type CogniteModel } from '@cognite/reveal';
+import { type AssetMapping3D } from '@cognite/sdk';
+import { useMemo } from 'react';
+import { type ModelWithAssetMappings } from '../components/CacheProvider/AssetMappingAndNode3DCacheProvider';
+import { isDefined } from '../utilities/isDefined';
+
+export const useCreateAssetMappingsMapPerModel = (
+  models: CogniteModel[],
+  assetMappings: ModelWithAssetMappings[] | undefined
+): Map<CogniteCadModel, AssetMapping3D[] | undefined> => {
+  return useMemo(() => {
+    const mappingsPerModel = new Map<CogniteCadModel, AssetMapping3D[] | undefined>();
+    models.forEach((model) => {
+      if (!(model instanceof CogniteCadModel)) {
+        return;
+      }
+      const flatAssetsMappingsList =
+        assetMappings
+          ?.filter((item) => item.model.modelId === model.modelId)
+          .map((item) => item.assetMappings)
+          .flat()
+          .filter(isDefined) ?? [];
+
+      mappingsPerModel.set(model, flatAssetsMappingsList);
+    });
+
+    return mappingsPerModel;
+  }, [assetMappings, models]);
+};
diff --git a/react-components/src/hooks/useImage360Collections.ts b/react-components/src/hooks/useImage360Collections.ts
index bc2e9e55095..89f768179fe 100644
--- a/react-components/src/hooks/useImage360Collections.ts
+++ b/react-components/src/hooks/useImage360Collections.ts
@@ -4,7 +4,7 @@
 import { useMemo } from 'react';
 import { useReveal } from '../components/RevealCanvas/ViewerContext';
 import { type Image360Collection } from '@cognite/reveal';
-import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesCountContext';
+import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesInfoContext';
 
 export const useImage360Collections = (): Image360Collection[] => {
   const viewer = useReveal();
diff --git a/react-components/src/query/useSearchMappedEquipmentAssetMappings.tsx b/react-components/src/query/useSearchMappedEquipmentAssetMappings.tsx
index 494a5fc7052..0c64d8ef551 100644
--- a/react-components/src/query/useSearchMappedEquipmentAssetMappings.tsx
+++ b/react-components/src/query/useSearchMappedEquipmentAssetMappings.tsx
@@ -36,7 +36,6 @@ export const useSearchMappedEquipmentAssetMappings = (
   const sdk = useSDK(userSdk);
   const modelsKey = models.map((model) => [model.modelId, model.revisionId]);
   const { data: assetMappings, isFetched } = useAllMappedEquipmentAssetMappings(models, sdk);
-
   return useQuery({
     queryKey: ['reveal', 'react-components', 'search-mapped-asset-mappings', query, modelsKey],
     queryFn: async () => {
diff --git a/react-components/src/utilities/convertAssetMetadataToLowerCase.ts b/react-components/src/utilities/convertAssetMetadataToLowerCase.ts
new file mode 100644
index 00000000000..8d9074bd801
--- /dev/null
+++ b/react-components/src/utilities/convertAssetMetadataToLowerCase.ts
@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type Asset } from '@cognite/sdk';
+
+export function convertAssetMetadataKeysToLowerCase(asset: Asset): Asset {
+  return {
+    ...asset,
+    metadata: Object.fromEntries(
+      [...Object.entries(asset.metadata ?? {})].map(
+        ([key, value]) => [key.toLowerCase(), value] as const
+      )
+    )
+  };
+}
diff --git a/react-components/stories/utilities/RevealStoryContainer.tsx b/react-components/stories/utilities/RevealStoryContainer.tsx
index b773914b767..633d5c7adf4 100644
--- a/react-components/stories/utilities/RevealStoryContainer.tsx
+++ b/react-components/stories/utilities/RevealStoryContainer.tsx
@@ -5,7 +5,7 @@ import { useRef, type ReactElement, useMemo } from 'react';
 import { RevealKeepAliveContext } from '../../src/components/RevealKeepAlive/RevealKeepAliveContext';
 import { RevealCanvas } from '../../src/components/RevealCanvas/RevealCanvas';
 import { type FdmNodeCache } from '../../src/components/CacheProvider/FdmNodeCache';
-import { type AssetMappingCache } from '../../src/components/CacheProvider/AssetMappingCache';
+import { type AssetMappingAndNode3DCache } from '../../src/components/CacheProvider/AssetMappingAndNode3DCache';
 import { type CogniteClient } from '@cognite/sdk';
 import { Cognite3DViewer } from '@cognite/reveal';
 import { createSdkByUrlToken } from './createSdkByUrlToken';
@@ -60,7 +60,7 @@ export const RevealStoryContext = ({
   const isRevealContainerMountedRef = useRef<boolean>(true);
   const sceneLoadedRef = useRef<SceneIdentifiers>();
   const fdmNodeCache = useRef<FdmNodeCache | undefined>();
-  const assetMappingCache = useRef<AssetMappingCache | undefined>();
+  const assetMappingCache = useRef<AssetMappingAndNode3DCache | undefined>();
   const pointCloudAnnotationCache = useRef<PointCloudAnnotationCache | undefined>();
   const image360AnnotationCache = useRef<Image360AnnotationCache | undefined>();
   return (
diff --git a/react-components/tests/unit-tests/components/RevealContainer.test.tsx b/react-components/tests/unit-tests/components/RevealContainer.test.tsx
index bbab6b2a286..5d47ce21270 100644
--- a/react-components/tests/unit-tests/components/RevealContainer.test.tsx
+++ b/react-components/tests/unit-tests/components/RevealContainer.test.tsx
@@ -6,7 +6,7 @@ import { type CogniteClient } from '@cognite/sdk';
 import { RevealKeepAliveContext } from '../../../src/components/RevealKeepAlive/RevealKeepAliveContext';
 import { type FC, useRef } from 'react';
 import { type FdmNodeCache } from '../../../src/components/CacheProvider/FdmNodeCache';
-import { type AssetMappingCache } from '../../../src/components/CacheProvider/AssetMappingCache';
+import { type AssetMappingAndNode3DCache } from '../../../src/components/CacheProvider/AssetMappingAndNode3DCache';
 import { type PointCloudAnnotationCache } from '../../../src/components/CacheProvider/PointCloudAnnotationCache';
 import { type Image360AnnotationCache } from '../../../src/components/CacheProvider/Image360AnnotationCache';
 import { type SceneIdentifiers } from '../../../src/components/SceneContainer/sceneTypes';
@@ -32,7 +32,7 @@ describe(RevealCanvas.name, () => {
       const isRevealContainerMountedRef = useRef<boolean>(true);
       const sceneLoadedRef = useRef<SceneIdentifiers | undefined>();
       const fdmNodeCache = useRef<FdmNodeCache | undefined>();
-      const assetMappingCache = useRef<AssetMappingCache | undefined>();
+      const assetMappingCache = useRef<AssetMappingAndNode3DCache | undefined>();
       const pointCloudAnnotationCache = useRef<PointCloudAnnotationCache>();
       const image360AnnotationCache = useRef<Image360AnnotationCache | undefined>();
       return (