List performance

src/entries/popup/components/Tabs/Tabs.tsx

@@ -31,9 +31,8 @@ function Tab({
       display="flex"
       flexDirection="column"
       justifyContent="center"
-      style={{
-        cursor: 'default',
-      }}
+      onClick={onClick}
+      style={{ cursor: 'default' }}
     >
       {/* TODO: Convert to <Row> */}
       <Box
@@ -42,7 +41,6 @@ function Tab({
         alignItems="center"
         style={{ flex: 1, outlineColor: accentColorAsHsl, borderRadius: 6 }}
         className="home-tab-wrapper"
-        onClick={onClick}
         tabIndex={tabIndex}
       >
         <Inset horizontal="2px">

src/entries/popup/hooks/useAllTransactions.ts

@@ -3,7 +3,6 @@ import { Address, useNetwork } from 'wagmi';
 
 import { SupportedCurrencyKey } from '~/core/references';
 import { shortcuts } from '~/core/references/shortcuts';
-import { selectTransactionsByDate } from '~/core/resources/_selectors';
 import { useTransactions } from '~/core/resources/transactions/transactions';
 import {
   currentAddressStore,
@@ -131,24 +130,6 @@ export function useAllTransactions({
   const pendingTransactions: RainbowTransaction[] = getPendingTransactions({
     address,
   });
-  const allTransactions = useMemo(
-    () => [
-      ...pendingTransactions,
-      ...(confirmedTransactions || []),
-      ...(confirmedArbitrumTransactions || []),
-      ...(confirmedBscTransactions || []),
-      ...(confirmedOptimismTransactions || []),
-      ...(confirmedPolygonTransactions || []),
-    ],
-    [
-      confirmedArbitrumTransactions,
-      confirmedBscTransactions,
-      confirmedOptimismTransactions,
-      confirmedPolygonTransactions,
-      confirmedTransactions,
-      pendingTransactions,
-    ],
-  );
 
   const isInitialLoading =
     confirmedInitialLoading ||
@@ -160,11 +141,25 @@ export function useAllTransactions({
 
   return useMemo(
     () => ({
-      allTransactions,
-      allTransactionsByDate: selectTransactionsByDate(allTransactions),
+      allTransactions: [
+        ...pendingTransactions,
+        ...(confirmedTransactions || []),
+        ...(confirmedArbitrumTransactions || []),
+        ...(confirmedBscTransactions || []),
+        ...(confirmedOptimismTransactions || []),
+        ...(confirmedPolygonTransactions || []),
+      ],
       isInitialLoading,
     }),
-    [allTransactions, isInitialLoading],
+    [
+      confirmedArbitrumTransactions,
+      confirmedBscTransactions,
+      confirmedOptimismTransactions,
+      confirmedPolygonTransactions,
+      confirmedTransactions,
+      pendingTransactions,
+      isInitialLoading,
+    ],
   );
 }
 

src/entries/popup/pages/home/Activity.tsx

@@ -1,15 +1,9 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
-import React, {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
+import React, { ReactNode, useMemo, useRef } from 'react';
 import { useAccount } from 'wagmi';
 
 import { i18n } from '~/core/languages';
+import { selectTransactionsByDate } from '~/core/resources/_selectors';
 import { useCurrentCurrencyStore } from '~/core/state';
 import {
   RainbowTransaction,
@@ -36,44 +30,27 @@ import { Spinner } from '../../components/Spinner/Spinner';
 import { useActivityShortcuts } from '../../hooks/useActivityShortcuts';
 import { useAllTransactions } from '../../hooks/useAllTransactions';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { TransactionDetailsMenu } from './TransactionDetailsMenu';
 
-const ACTIVITY_DEFAULT_LENGTH = 100;
-
 export function Activity() {
   const { address } = useAccount();
   const { currentCurrency: currency } = useCurrentCurrencyStore();
-  const { allTransactionsByDate, isInitialLoading } = useAllTransactions({
+  const { allTransactions, isInitialLoading } = useAllTransactions({
     address,
     currency,
   });
-  const [activityLength, setActivityLength] = useState(ACTIVITY_DEFAULT_LENGTH);
-  const listData = useMemo(() => {
-    return Object.keys(allTransactionsByDate).reduce((listData, dateKey) => {
-      return [...listData, dateKey, ...allTransactionsByDate[dateKey]];
-    }, [] as (string | RainbowTransaction)[]);
-  }, [allTransactionsByDate]).slice(0, activityLength);
+
+  const listData = useMemo(
+    () => Object.entries(selectTransactionsByDate(allTransactions)).flat(2),
+    [allTransactions],
+  );
+
   const containerRef = useRef<HTMLDivElement>(null);
-  const activityRowVirtualizer = useVirtualizer({
+  const activityRowVirtualizer = useWindowVirtualizer({
     count: listData.length,
-    getScrollElement: () => containerRef.current,
     estimateSize: (i) => (typeof listData[i] === 'string' ? 34 : 52),
     overscan: 20,
   });
-  const scrollEndListener = useCallback(() => {
-    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
-      setActivityLength(activityLength + ACTIVITY_DEFAULT_LENGTH);
-    }
-  }, [activityLength]);
-
-  useEffect(() => {
-    window.removeEventListener('scroll', scrollEndListener);
-    window.addEventListener('scroll', scrollEndListener);
-    return () => {
-      window.removeEventListener('scroll', scrollEndListener);
-    };
-  }, [scrollEndListener]);
 
   useActivityShortcuts();
 
@@ -135,18 +112,18 @@ export function Activity() {
           }}
         >
           {activityRowVirtualizer.getVirtualItems().map((virtualItem) => {
-            const { index, start } = virtualItem;
+            const { index, key, start, size } = virtualItem;
             const rowData = listData[index];
             return (
               <Box
-                key={index}
+                key={key}
                 data-index={index}
                 style={{
                   position: 'absolute',
                   top: 0,
                   left: 0,
                   width: '100%',
-                  height: typeof rowData === 'string' ? 34 : 52,
+                  height: size,
                   transform: `translateY(${start}px)`,
                 }}
               >

src/entries/popup/pages/home/Tokens.tsx

@@ -1,3 +1,4 @@
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
 import { useMemo, useState } from 'react';
 
 import { i18n } from '~/core/languages';
@@ -28,7 +29,6 @@ import { CoinbaseIcon } from '../../components/CoinbaseIcon/CoinbaseIcon';
 import { WalletIcon } from '../../components/WalletIcon/WalletIcon';
 import { useKeyboardShortcut } from '../../hooks/useKeyboardShortcut';
 import { useTokensShortcuts } from '../../hooks/useTokensShortcuts';
-import { useVirtualizedAssets } from '../../hooks/useVirtualizedAssets';
 
 import { TokenDetailsMenu } from './TokenDetailsMenu';
 
@@ -46,8 +46,10 @@ export function Tokens() {
     { address: currentAddress, currency, connectedToHardhat },
     { select: selectUserAssetsList },
   );
-  const { containerRef, assetsRowVirtualizer } = useVirtualizedAssets({
-    assets,
+  const assetsRowVirtualizer = useWindowVirtualizer({
+    count: assets?.length || 0,
+    estimateSize: () => 52,
+    overscan: 20,
   });
 
   useKeyboardShortcut({
@@ -73,7 +75,6 @@ export function Tokens() {
 
   return (
     <Box
-      ref={containerRef}
       width="full"
       style={{
         overflow: 'auto',
@@ -91,17 +92,13 @@ export function Tokens() {
           position: 'relative',
         }}
       >
-        <Box
-          style={{
-            overflow: 'auto',
-          }}
-        >
+        <Box style={{ overflow: 'auto' }}>
           {assetsRowVirtualizer.getVirtualItems().map((virtualItem) => {
-            const { index } = virtualItem;
+            const { key, index } = virtualItem;
             const rowData = assets[index];
             return (
               <Box
-                key={index}
+                key={key}
                 style={{
                   position: 'absolute',
                   top: 0,

src/entries/popup/pages/home/index.tsx

@@ -6,7 +6,13 @@ import {
   useSpring,
   useTransform,
 } from 'framer-motion';
-import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useState,
+  useTransition,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAccount } from 'wagmi';
 
@@ -66,13 +72,15 @@ export function Home() {
 
   const [activeTab, setActiveTab] = useState<Tab>(state?.activeTab || 'tokens');
 
+  const [, startTransition] = useTransition();
+
   const onSelectTab = useCallback((tab: Tab) => {
     // If we are already in a state where the header is collapsed,
     // then ensure we are scrolling to the top when we change tab.
     if (window.scrollY > COLLAPSED_HEADER_TOP_OFFSET) {
       window.scrollTo({ top: COLLAPSED_HEADER_TOP_OFFSET });
     }
-    setActiveTab(tab);
+    startTransition(() => setActiveTab(tab));
   }, []);
 
   useEffect(() => {