Support - LLM performance improvements - LIVE-4965 (#2435)

* perf: prevent expensive re-renders on portfolio and asset screens

Optimise rendering logic of Portfolio screen, Asset screen and other components through:
- use of improved selectors
- improved memoisation of some expensive components
- useThrottledPortfolio hook to allow throttling the computation of portfolio graph data

* docs: wording fix

.changeset/good-ghosts-grin.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": patch
+---
+
+Implement useThrottledPortfolio hook to allow throttling the computation of portfolio graph data

.changeset/purple-files-enjoy.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Optimise rendering logic of Portfolio screen, Asset screen and other components through use of improved selectors, improved memoisation of some expensive components and throttling of frequent expensive computations

apps/ledger-live-mobile/src/actions/settings.ts

@@ -36,7 +36,6 @@ import {
   SettingsRemoveStarredMarketcoinsPayload,
   SettingsSetAnalyticsPayload,
   SettingsSetAvailableUpdatePayload,
-  SettingsSetCarouselVisibilityPayload,
   SettingsSetLastSeenCustomImagePayload,
   SettingsSetCountervaluePayload,
   SettingsSetDiscreetModePayload,
@@ -267,14 +266,6 @@ export const dismissBanner = (bannerId: string) =>
     bannerId,
   });
 
-const setCarouselVisibilityAction =
-  createAction<SettingsSetCarouselVisibilityPayload>(
-    SettingsActionTypes.SETTINGS_SET_CAROUSEL_VISIBILITY,
-  );
-export const setCarouselVisibility = (carouselVisibility: {
-  [key: string]: boolean;
-}) => setCarouselVisibilityAction({ carouselVisibility });
-
 const setDismissedDynamicCardsAction =
   createAction<SettingsSetDismissedDynamicCardsPayload>(
     SettingsActionTypes.SETTINGS_SET_DISMISSED_DYNAMIC_CARDS,

apps/ledger-live-mobile/src/actions/types.ts

@@ -370,10 +370,6 @@ export type SettingsSetAvailableUpdatePayload = Pick<
 >;
 export type SettingsSetThemePayload = Pick<SettingsState, "theme">;
 export type SettingsSetOsThemePayload = Pick<SettingsState, "osTheme">;
-export type SettingsSetCarouselVisibilityPayload = Pick<
-  SettingsState,
-  "carouselVisibility"
->;
 export type SettingsSetDismissedDynamicCardsPayload = Pick<
   SettingsState,
   "dismissedDynamicCards"
@@ -500,7 +496,6 @@ export type SettingsPayload =
   | SettingsSetAvailableUpdatePayload
   | SettingsSetThemePayload
   | SettingsSetOsThemePayload
-  | SettingsSetCarouselVisibilityPayload
   | SettingsSetDiscreetModePayload
   | SettingsSetLanguagePayload
   | SettingsSetLocalePayload

apps/ledger-live-mobile/src/analytics/index.ts

@@ -1,7 +1,5 @@
-// eslint-disable-next-line import/no-cycle
 import Track from "./Track";
-// eslint-disable-next-line import/no-cycle
 import TrackScreen from "./TrackScreen";
-// eslint-disable-next-line import/no-cycle
+
 export * from "./segment";
 export { Track, TrackScreen };

apps/ledger-live-mobile/src/components/AccountGraphCard.tsx

@@ -40,7 +40,7 @@ import { Item } from "./Graph/types";
 import getWindowDimensions from "../logic/getWindowDimensions";
 import Graph from "./Graph";
 import Touchable from "./Touchable";
-import TransactionsPendingConfirmationWarning from "./TransactionsPendingConfirmationWarning";
+import { TransactionsPendingConfirmationWarningForAccount } from "./TransactionsPendingConfirmationWarning";
 import { NoCountervaluePlaceholder } from "./CounterValue";
 import { ensureContrast } from "../colors";
 import { NavigatorName, ScreenName } from "../const";
@@ -301,7 +301,9 @@ const GraphCardHeader = ({
               <NoCountervaluePlaceholder />
             )}
           </Text>
-          <TransactionsPendingConfirmationWarning maybeAccount={account} />
+          <TransactionsPendingConfirmationWarningForAccount
+            maybeAccount={account}
+          />
         </Flex>
         <Text
           fontFamily="Inter"

apps/ledger-live-mobile/src/components/AssetCentricGraphCard.tsx

@@ -14,7 +14,7 @@ import Delta from "./Delta";
 import CurrencyUnitValue from "./CurrencyUnitValue";
 import getWindowDimensions from "../logic/getWindowDimensions";
 import Graph from "./Graph";
-import TransactionsPendingConfirmationWarning from "./TransactionsPendingConfirmationWarning";
+import { TransactionsPendingConfirmationWarningAllAccounts } from "./TransactionsPendingConfirmationWarning";
 import ParentCurrencyIcon from "./ParentCurrencyIcon";
 import FormatDate from "./FormatDate";
 import { ensureContrast } from "../colors";
@@ -182,7 +182,7 @@ function AssetCentricGraphCard({
                     </Text>
                   </Flex>
                 )}
-                <TransactionsPendingConfirmationWarning />
+                <TransactionsPendingConfirmationWarningAllAccounts />
               </Flex>
               <Flex flexDirection={"row"}>
                 {!balanceHistory ? (

apps/ledger-live-mobile/src/components/AssetRowLayout.tsx

@@ -5,6 +5,7 @@ import { BigNumber } from "bignumber.js";
 import { Currency, Unit } from "@ledgerhq/types-cryptoassets";
 import { Flex, Text, Tag } from "@ledgerhq/native-ui";
 import { ValueChange } from "@ledgerhq/types-live";
+import { isEqual } from "lodash";
 import CurrencyUnitValue from "./CurrencyUnitValue";
 import CounterValue from "./CounterValue";
 import Delta from "./Delta";
@@ -125,4 +126,12 @@ const AssetRowLayout = ({
   );
 };
 
-export default React.memo<Props>(AssetRowLayout);
+/**
+ * In most usages, the prop `countervalueChange` is an object that is
+ * created at each render in the parent component, (with a new ref)
+ * hence why the deep equality here.
+ * By avoiding a re-render of this component, we can save ~5ms on a performant
+ * device, in __DEV__ mode. Since it's meant to be rendered in a list, this is
+ * not a small optimisation.
+ */
+export default React.memo<Props>(AssetRowLayout, isEqual);