perf: eliminating asset avatar flashing (#1123)

This pull request memo the `Avatar` component, which avoids unnecessary rerendering when `imageUrl` is unchanged. ## Before [before.webm](https://github.com/FuelLabs/fuels-wallet/assets/160697994/05275c41-fc8d-4ea2-ac09-186049b64203) ## After [after.webm](https://github.com/FuelLabs/fuels-wallet/assets/160697994/0af2c0d0-7c74-4f6f-9a79-c3a2ca40b4ea)
FuelLabs · Mar 13, 2024 · e18231a · e18231a
1 parent 773f3e7
commit e18231a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/.changeset/three-wombats-hope.md b/.changeset/three-wombats-hope.md
@@ -0,0 +1,5 @@
+---
+'fuels-wallet': minor
+---
+
+perf: eliminating asset avatar flashing
diff --git a/packages/app/src/systems/Asset/components/AssetList/AssetList.tsx b/packages/app/src/systems/Asset/components/AssetList/AssetList.tsx
@@ -1,7 +1,7 @@
 import { Button, CardList } from '@fuel-ui/react';
 import type { AssetAmount } from '@fuel-wallet/types';
 import type { FC } from 'react';
-import { useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 
 import { AssetItem } from '../AssetItem';
 
@@ -65,5 +65,6 @@ export const AssetList: AssetListComponent = ({
   );
 };
 
+export const MemoAssetList = memo(AssetList);
 AssetList.Empty = AssetListEmpty;
 AssetList.Loading = AssetListLoading;
diff --git a/packages/app/src/systems/Asset/pages/Assets/Assets.tsx b/packages/app/src/systems/Asset/pages/Assets/Assets.tsx
@@ -3,7 +3,7 @@ import { Button, Icon, Tabs } from '@fuel-ui/react';
 import { AnimatePresence } from 'framer-motion';
 import { Layout, scrollable } from '~/systems/Core';
 
-import { AssetList } from '../../components';
+import { MemoAssetList } from '../../components';
 import { useAssets } from '../../hooks';
 
 export function Assets() {
@@ -26,7 +26,7 @@ export function Assets() {
               </Tabs.Trigger>
             </Tabs.List>
             <Tabs.Content value="custom">
-              <AssetList
+              <MemoAssetList
                 assets={state.assetsCustom}
                 showActions
                 onRemove={(assetId: string) =>
@@ -40,7 +40,7 @@ export function Assets() {
               />
             </Tabs.Content>
             <Tabs.Content value="listed">
-              <AssetList assets={state.assetsListed} />
+              <MemoAssetList assets={state.assetsListed} />
             </Tabs.Content>
           </Tabs>
         </AnimatePresence>

diff --git a/packages/app/src/systems/Home/pages/Home/Home.tsx b/packages/app/src/systems/Home/pages/Home/Home.tsx
@@ -1,9 +1,10 @@
 import { cssObj } from '@fuel-ui/css';
 import { Box } from '@fuel-ui/react';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { VITE_FUEL_PROVIDER_URL } from '~/config';
 import { BalanceWidget, useAccounts } from '~/systems/Account';
-import { AssetList } from '~/systems/Asset';
+import { MemoAssetList } from '~/systems/Asset';
 import { Layout, Pages, scrollable } from '~/systems/Core';
 import { useBalanceVisibility } from '~/systems/Core/hooks/useVisibility';
 import { useNetworks } from '~/systems/Network';
@@ -24,6 +25,9 @@ export function Home() {
     navigate(Pages.receive());
   };
 
+  const emptyProps = useMemo(() => {
+    return { showFaucet: selectedNetwork?.url === VITE_FUEL_PROVIDER_URL };
+  }, [selectedNetwork]);
   return (
     <Layout title="Home" isHome>
       <Layout.TopBar />
@@ -45,12 +49,10 @@ export function Home() {
               <AssetsTitle />
             </Box>
             <Box.Stack css={styles.assetsList}>
-              <AssetList
+              <MemoAssetList
                 assets={balanceAssets}
                 isLoading={isLoading}
-                emptyProps={{
-                  showFaucet: selectedNetwork?.url === VITE_FUEL_PROVIDER_URL,
-                }}
+                emptyProps={emptyProps}
               />
             </Box.Stack>
           </Box.Stack>