fix: improve assets perfs

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -69,6 +69,7 @@ import { useMetrics } from '../../../components/hooks/useMetrics';
 import { createBuyNavigationDetails } from '../Ramp/routes/utils';
 import { TokenI } from '../Tokens/types';
 import AssetDetailsActions from '../../../components/Views/AssetDetails/AssetDetailsActions';
+import { throttle } from 'lodash';
 
 interface AssetOverviewProps {
   asset: TokenI;
@@ -195,7 +196,11 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
             networkConfiguration.defaultRpcEndpointIndex
           ]?.networkClientId;
 
-        await NetworkController.setActiveNetwork(networkClientId as string);
+        const throttledSetActiveNetwork = throttle(async (id: string) => {
+          await NetworkController.setActiveNetwork(id);
+        }, 300);
+
+        throttledSetActiveNetwork(networkClientId as string);
       }
     }
     if (asset.isETH && ticker) {
@@ -226,13 +231,23 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
             networkConfiguration.defaultRpcEndpointIndex
           ]?.networkClientId;
 
-        NetworkController.setActiveNetwork(networkClientId as string).then(
-          () => {
-            setTimeout(() => {
-              handleSwapNavigation();
-            }, 500);
+        // Create a throttled version of setActiveNetwork
+        const throttledSetActiveNetwork = throttle(
+          async (networkClientIdToUse: string) => {
+            try {
+              await NetworkController.setActiveNetwork(networkClientIdToUse);
+              setTimeout(() => {
+                handleSwapNavigation();
+              }, 500);
+            } catch (error) {
+              Logger.error(new Error(`Error in setActiveNetwork: ${error}`));
+            }
           },
+          300,
+          { leading: true, trailing: false },
         );
+
+        throttledSetActiveNetwork(networkClientId as string);
       } else {
         handleSwapNavigation();
       }

app/components/UI/NetworkModal/index.tsx

@@ -46,6 +46,7 @@ import {
   RpcEndpointType,
   AddNetworkFields,
 } from '@metamask/network-controller';
+import { throttle } from 'lodash';
 
 export interface SafeChain {
   chainId: string;
@@ -266,7 +267,11 @@ const NetworkModals = (props: NetworkProps) => {
 
     if (networkClientId) {
       onUpdateNetworkFilter();
-      await NetworkController.setActiveNetwork(networkClientId);
+      const throttledSetActiveNetwork = throttle(async (id: string) => {
+        await NetworkController.setActiveNetwork(id);
+      }, 300);
+
+      throttledSetActiveNetwork(networkClientId as string);
     }
 
     onClose();
@@ -292,7 +297,11 @@ const NetworkModals = (props: NetworkProps) => {
       updatedNetwork?.rpcEndpoints?.[updatedNetwork.defaultRpcEndpointIndex] ??
       {};
     onUpdateNetworkFilter();
-    await NetworkController.setActiveNetwork(networkClientId);
+    const throttledSetActiveNetwork = throttle(async (id: string) => {
+      await NetworkController.setActiveNetwork(id);
+    }, 300);
+
+    throttledSetActiveNetwork(networkClientId as string);
   };
 
   const handleNewNetwork = async (
@@ -361,7 +370,11 @@ const NetworkModals = (props: NetworkProps) => {
         {};
 
       onUpdateNetworkFilter();
-      NetworkController.setActiveNetwork(networkClientId);
+      const throttledSetActiveNetwork = throttle(async (id: string) => {
+        await NetworkController.setActiveNetwork(id);
+      }, 300);
+
+      throttledSetActiveNetwork(networkClientId as string);
     }
     onClose();
 

app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx

@@ -9,6 +9,7 @@ import {
 import { ScrollView } from 'react-native-gesture-handler';
 import { ChainId, toHex } from '@metamask/controller-utils';
 import { useSelector } from 'react-redux';
+import { throttle } from 'lodash';
 
 import LoadingNetworksSkeleton from './LoadingNetworksSkeleton';
 import ScreenLayout from '../../components/ScreenLayout';
@@ -145,7 +146,11 @@ function NetworkSwitcher() {
   const switchToMainnet = useCallback(
     (type: 'mainnet' | 'linea-mainnet') => {
       const { NetworkController } = Engine.context;
-      NetworkController.setActiveNetwork(type);
+      const throttledSetActiveNetwork = throttle(async (id: string) => {
+        await NetworkController.setActiveNetwork(id);
+      }, 300);
+
+      throttledSetActiveNetwork(type);
       navigateToGetStarted();
     },
     [navigateToGetStarted],
@@ -164,7 +169,11 @@ function NetworkSwitcher() {
         const { networkClientId } =
           rpcEndpoints?.[defaultRpcEndpointIndex] ?? {};
 
-        NetworkController.setActiveNetwork(networkClientId);
+        const throttledSetActiveNetwork = throttle(async (id: string) => {
+          await NetworkController.setActiveNetwork(id);
+        }, 300);
+
+        throttledSetActiveNetwork(networkClientId as string);
         navigateToGetStarted();
       }
     },

app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
@@ -56,7 +56,7 @@
 import { getChainIdsToPoll } from '../../../../../selectors/tokensController';
 import AggregatedPercentageCrossChains from '../../../../../component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentageCrossChains';
 
-export const PortfolioBalance = () => {
+export const PortfolioBalance = React.memo(() => {
   const { PreferencesController } = Engine.context;
   const { colors } = useTheme();
   const styles = createStyles(colors);
@@ -112,24 +112,32 @@
     type,
   );
 
-  let total;
-  if (isOriginalNativeTokenSymbol) {
-    if (isPortfolioViewEnabled()) {
-      total = totalFiatBalance ?? 0;
-    } else {
+  const total = useMemo(() => {
+    if (isOriginalNativeTokenSymbol) {
+      if (isPortfolioViewEnabled()) {
+        return totalFiatBalance ?? 0;
+      }
       const tokenFiatTotal = balance?.tokenFiat ?? 0;
       const ethFiatTotal = balance?.ethFiat ?? 0;
-      total = tokenFiatTotal + ethFiatTotal;
+      return tokenFiatTotal + ethFiatTotal;
     }
-  } else if (isPortfolioViewEnabled()) {
-    total = totalTokenFiat ?? 0;
-  } else {
-    total = balance?.tokenFiat ?? 0;
-  }
-
-  const fiatBalance = `${renderFiat(total, currentCurrency)}`;
+    if (isPortfolioViewEnabled()) {
+      return totalTokenFiat ?? 0;
+    }
+    return balance?.tokenFiat ?? 0;
+  }, [
+    isOriginalNativeTokenSymbol,
+    isPortfolioViewEnabled,
+    totalFiatBalance,
+    totalTokenFiat,
+    balance,
+  ]);
 
-  const onOpenPortfolio = () => {
+  const fiatBalance = useMemo(
+    () => `${renderFiat(total, currentCurrency)}`,
+    [total, currentCurrency],
+  );
+  const onOpenPortfolio = useCallback(() => {
     const existingPortfolioTab = browserTabs.find(({ url }: BrowserTab) =>
       isPortfolioUrl(url),
     );
@@ -172,7 +180,14 @@
         })
         .build(),
     );
-  };
+  }, [
+    navigation,
+    trackEvent,
+    createEventBuilder,
+    isEnabled,
+    isDataCollectionForMarketingEnabled,
+    browserTabs,
+  ]);
 
   const renderAggregatedPercentage = () => {
     if (isTestNet(chainId)) {
@@ -199,9 +214,12 @@
     );
   };
 
-  const toggleIsBalanceAndAssetsHidden = (value: boolean) => {
-    PreferencesController.setPrivacyMode(value);
-  };
+  const toggleIsBalanceAndAssetsHidden = useCallback(
+    (value: boolean) => {
+      PreferencesController.setPrivacyMode(value);
+    },
+    [PreferencesController],
+  );
 
   return (
     <View style={styles.portfolioBalance}>
@@ -247,4 +265,4 @@
       </View>
     </View>
   );
-};
+});