fix: improve list render performance

package.json

@@ -128,6 +128,7 @@
     "react-icons": "4.2.0",
     "react-query": "3.33.4",
     "react-router-dom": "6.0.0",
+    "react-virtuoso": "2.3.1",
     "svg-url-loader": "7.1.1",
     "ts-debounce": "3.0.0",
     "use-events": "1.4.2",

src/features/account-switch-drawer/components/account-list.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback } from 'react';
 import { truncateMiddle } from '@stacks/ui-utils';
 import { Box, Fade, Stack, color, Spinner } from '@stacks/ui';
 import { FiCheck as IconCheck } from 'react-icons/fi';
+import { Virtuoso } from 'react-virtuoso';
 
 import { SpaceBetween } from '@components/space-between';
 import { useSwitchAccount } from '@common/hooks/account/use-switch-account';
@@ -86,10 +87,10 @@ interface AccountListProps {
 }
 export const AccountList = memo(({ accounts, handleClose }: AccountListProps) => {
   return (
-    <>
-      {accounts.map(account => (
-        <AccountListItem handleClose={handleClose} key={account.address} account={account} />
-      ))}
-    </>
+    <Virtuoso
+      style={{ height: '70vh' }}
+      totalCount={accounts.length}
+      itemContent={index => <AccountListItem handleClose={handleClose} account={accounts[index]} />}
+    />
   );
 });

yarn.lock

@@ -4448,6 +4448,18 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+"@virtuoso.dev/react-urx@^0.2.12":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.12.tgz#6c75cdbea2503c129b34d1ce2ee8cd649503b47c"
+  integrity sha512-Lcrrmq/UztM+rgepAdThdIk8dL3LEi9o2NTkL6ZLKPrTGjr5tSmsauD30/O8yu7Q0ncDnptmMR3OObdvMGuEKQ==
+  dependencies:
+    "@virtuoso.dev/urx" "^0.2.12"
+
+"@virtuoso.dev/urx@^0.2.12":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@virtuoso.dev/urx/-/urx-0.2.12.tgz#fa9bd1a2777cf70b19d4c9836b8d92b04f079c64"
+  integrity sha512-Q9nlRqYb5Uq4Ynu8cWPSJ7LxpuZsI+MZ09IJlDAAgwuNgfWRArpVRP0VN0coYgUo2fKMjhmV69MTqaUbIBhu/g==
+
 "@vkontakte/vk-qr@2.0.12":
   version "2.0.12"
   resolved "https://registry.yarnpkg.com/@vkontakte/vk-qr/-/vk-qr-2.0.12.tgz#012bae0c83dd98c20b92d6cf4372fbfbb0492b54"
@@ -13853,6 +13865,14 @@ react-transition-group@^4.4.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtuoso@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.3.1.tgz#d0305c6bdca3856dde43ed9091549db76fa21397"
+  integrity sha512-Y5qsh5xaGvMAN7S2LOm0n5Hg5gl76GEFSNzD/LNSR6Bm8UFncmEwIKEqp7lJMyM9aLrFV67Ap4rA0JL63Eb/uw==
+  dependencies:
+    "@virtuoso.dev/react-urx" "^0.2.12"
+    "@virtuoso.dev/urx" "^0.2.12"
+
 react@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"