perf: rendering fixes

shapeshift · Jul 25, 2023 · 3352f50 · 3352f50
1 parent c7077e9
commit 3352f50
Show file tree

Hide file tree

Showing 51 changed files with 1,724 additions and 1,564 deletions.
diff --git a/src/components/AccountDropdown/AccountDropdown.tsx b/src/components/AccountDropdown/AccountDropdown.tsx
diff --git a/src/components/AssetIcon.tsx b/src/components/AssetIcon.tsx
@@ -2,6 +2,7 @@ import type { AvatarProps } from '@chakra-ui/react'
 import { Avatar, Circle, Flex, useColorModeValue, useMultiStyleConfig } from '@chakra-ui/react'
 import type { AssetId } from '@shapeshiftoss/caip'
 import { fromAssetId } from '@shapeshiftoss/caip'
+import { memo } from 'react'
 import { getChainAdapterManager } from 'context/PluginProvider/chainAdapterSingleton'
 import { selectAssetById, selectFeeAssetById } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
@@ -24,6 +25,19 @@ type AssetWithNetworkProps = {
   assetId: AssetId
 } & AvatarProps
 
+const before = {
+  content: '""',
+  width: '115%',
+  height: '115%',
+  backgroundColor: 'var(--chakra-colors-chakra-body-bg)',
+  borderRadius: 'full',
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%, -50%)',
+  zIndex: -1,
+}
+
 const AssetWithNetwork: React.FC<AssetWithNetworkProps> = ({ assetId, icon, src, ...rest }) => {
   const asset = useAppSelector(state => selectAssetById(state, assetId ?? ''))
   const feeAsset = useAppSelector(state => selectFeeAssetById(state, assetId))
@@ -44,25 +58,14 @@ const AssetWithNetwork: React.FC<AssetWithNetworkProps> = ({ assetId, icon, src,
           bg='none'
           fontSize='inherit'
           src={feeAsset?.networkIcon ?? feeAsset?.icon}
-          _before={{
-            content: '""',
-            width: '115%',
-            height: '115%',
-            backgroundColor: 'var(--chakra-colors-chakra-body-bg)',
-            borderRadius: 'full',
-            position: 'absolute',
-            left: '50%',
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-            zIndex: -1,
-          }}
+          _before={before}
         />
       )}
     </Avatar>
   )
 }
 
-export const AssetIcon = ({ assetId, showNetworkIcon, src, ...rest }: AssetIconProps) => {
+export const AssetIcon = memo(({ assetId, showNetworkIcon, src, ...rest }: AssetIconProps) => {
   const asset = useAppSelector(state => selectAssetById(state, assetId ?? ''))
   const assetIconBg = useColorModeValue('gray.200', 'gray.700')
   const assetIconColor = useColorModeValue('gray.500', 'gray.500')
@@ -117,7 +120,7 @@ export const AssetIcon = ({ assetId, showNetworkIcon, src, ...rest }: AssetIconP
       {...rest}
     />
   )
-}
+})
 
 type WrappedIconProps = {
   wrapColor?: string

diff --git a/src/components/AssetSearch/AssetList.tsx b/src/components/AssetSearch/AssetList.tsx
@@ -1,7 +1,8 @@
 import type { ListProps } from '@chakra-ui/react'
 import { Center } from '@chakra-ui/react'
 import type { FC } from 'react'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import type { Size } from 'react-virtualized-auto-sizer'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'components/Text'
@@ -54,33 +55,47 @@ export const AssetList: FC<AssetListProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [assets])
 
-  return (
-    <AutoSizer disableWidth className='auto-sizered'>
-      {({ height }) =>
-        assets?.length === 0 ? (
+  const itemData = useMemo(
+    () => ({
+      assets,
+      handleClick,
+      disableUnsupported,
+      hideZeroBalanceAmounts,
+    }),
+    [assets, disableUnsupported, handleClick, hideZeroBalanceAmounts],
+  )
+
+  const renderContent = useCallback(
+    ({ height }: Size) => {
+      if (assets?.length === 0) {
+        return (
           <Center>
             <Text color='gray.500' translation='common.noResultsFound' />
           </Center>
-        ) : (
-          <FixedSizeList
-            itemSize={60}
-            height={height}
-            width='100%'
-            itemData={{
-              assets,
-              handleClick,
-              disableUnsupported,
-              hideZeroBalanceAmounts,
-            }}
-            itemCount={assets.length}
-            ref={tokenListRef}
-            className='token-list'
-            overscanCount={6}
-          >
-            {AssetRow}
-          </FixedSizeList>
         )
       }
+
+      return (
+        <FixedSizeList
+          itemSize={60}
+          height={height}
+          width='100%'
+          itemData={itemData}
+          itemCount={assets.length}
+          ref={tokenListRef}
+          className='token-list'
+          overscanCount={3}
+        >
+          {AssetRow}
+        </FixedSizeList>
+      )
+    },
+    [assets.length, itemData],
+  )
+
+  return (
+    <AutoSizer disableWidth className='auto-sizered'>
+      {renderContent}
     </AutoSizer>
   )
 }
diff --git a/src/components/AssetSearch/AssetRow.tsx b/src/components/AssetSearch/AssetRow.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Flex, Text, useColorModeValue } from '@chakra-ui/react'
 import type { FC } from 'react'
-import { useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import type { ListChildComponentProps } from 'react-window'
 import { Amount } from 'components/Amount/Amount'
 import { AssetIcon } from 'components/AssetIcon'
@@ -17,74 +17,79 @@ import {
 } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
-export const AssetRow: FC<ListChildComponentProps<AssetData>> = ({
-  data: { handleClick, disableUnsupported, assets, hideZeroBalanceAmounts },
-  index,
-  style,
-}) => {
-  const color = useColorModeValue('gray.500', 'whiteAlpha.500')
-  const {
-    state: { isConnected, isDemoWallet, wallet },
-  } = useWallet()
-  const asset: Asset | undefined = assets[index]
-  const assetId = asset?.assetId
-  const filter = useMemo(() => ({ assetId }), [assetId])
-  const isSupported = wallet && isAssetSupportedByWallet(assetId, wallet)
-  const cryptoHumanBalance = useAppSelector(s =>
-    selectPortfolioCryptoPrecisionBalanceByFilter(s, filter),
-  )
-  const userCurrencyBalance =
-    useAppSelector(s => selectPortfolioUserCurrencyBalanceByAssetId(s, filter)) ?? '0'
-  if (!asset) return null
+const focus = {
+  shadow: 'outline-inset',
+}
+
+export const AssetRow: FC<ListChildComponentProps<AssetData>> = memo(
+  ({ data: { handleClick, disableUnsupported, assets, hideZeroBalanceAmounts }, index, style }) => {
+    const color = useColorModeValue('gray.500', 'whiteAlpha.500')
+    const {
+      state: { isConnected, isDemoWallet, wallet },
+    } = useWallet()
+    const asset: Asset | undefined = assets[index]
+    const assetId = asset?.assetId
+    const filter = useMemo(() => ({ assetId }), [assetId])
+    const isSupported = wallet && isAssetSupportedByWallet(assetId, wallet)
+    const cryptoHumanBalance = useAppSelector(s =>
+      selectPortfolioCryptoPrecisionBalanceByFilter(s, filter),
+    )
+    const userCurrencyBalance =
+      useAppSelector(s => selectPortfolioUserCurrencyBalanceByAssetId(s, filter)) ?? '0'
+    const handleOnClick = useCallback(() => handleClick(asset), [asset, handleClick])
+
+    if (!asset) return null
 
-  const hideAssetBalance = !!(hideZeroBalanceAmounts && bnOrZero(cryptoHumanBalance).isZero())
+    const hideAssetBalance = !!(hideZeroBalanceAmounts && bnOrZero(cryptoHumanBalance).isZero())
 
-  return (
-    <Button
-      variant='ghost'
-      onClick={() => handleClick(asset)}
-      justifyContent='space-between'
-      isDisabled={!isSupported && disableUnsupported}
-      style={style}
-      _focus={{
-        shadow: 'outline-inset',
-      }}
-    >
-      <Flex gap={4} alignItems='center'>
-        <AssetIcon assetId={asset.assetId} size='sm' />
-        <Box textAlign='left'>
-          <Text
-            lineHeight={1}
-            textOverflow='ellipsis'
-            whiteSpace='nowrap'
-            maxWidth='200px'
-            overflow='hidden'
-          >
-            {asset.name}
-          </Text>
-          <Flex alignItems='center' gap={2}>
-            <Text fontWeight='normal' fontSize='sm' color={color}>
-              {asset.symbol}
+    return (
+      <Button
+        variant='ghost'
+        onClick={handleOnClick}
+        justifyContent='space-between'
+        isDisabled={!isSupported && disableUnsupported}
+        style={style}
+        _focus={focus}
+      >
+        <Flex gap={4} alignItems='center'>
+          <AssetIcon assetId={asset.assetId} size='sm' />
+          <Box textAlign='left'>
+            <Text
+              lineHeight={1}
+              textOverflow='ellipsis'
+              whiteSpace='nowrap'
+              maxWidth='200px'
+              overflow='hidden'
+            >
+              {asset.name}
             </Text>
-            {asset.id && (
+            <Flex alignItems='center' gap={2}>
               <Text fontWeight='normal' fontSize='sm' color={color}>
-                {middleEllipsis(asset.id)}
+                {asset.symbol}
               </Text>
-            )}
-          </Flex>
-        </Box>
-      </Flex>
-      {isConnected && !isDemoWallet && !hideAssetBalance && (
-        <Flex flexDir='column' justifyContent='flex-end' alignItems='flex-end'>
-          <Amount.Fiat color='var(--chakra-colors-chakra-body-text)' value={userCurrencyBalance} />
-          <Amount.Crypto
-            fontSize='sm'
-            fontWeight='normal'
-            value={firstNonZeroDecimal(bnOrZero(cryptoHumanBalance)) ?? '0'}
-            symbol={asset.symbol}
-          />
+              {asset.id && (
+                <Text fontWeight='normal' fontSize='sm' color={color}>
+                  {middleEllipsis(asset.id)}
+                </Text>
+              )}
+            </Flex>
+          </Box>
         </Flex>
-      )}
-    </Button>
-  )
-}
+        {isConnected && !isDemoWallet && !hideAssetBalance && (
+          <Flex flexDir='column' justifyContent='flex-end' alignItems='flex-end'>
+            <Amount.Fiat
+              color='var(--chakra-colors-chakra-body-text)'
+              value={userCurrencyBalance}
+            />
+            <Amount.Crypto
+              fontSize='sm'
+              fontWeight='normal'
+              value={firstNonZeroDecimal(bnOrZero(cryptoHumanBalance)) ?? '0'}
+              symbol={asset.symbol}
+            />
+          </Flex>
+        )}
+      </Button>
+    )
+  },
+)