Merge pull request #13139 from ethereum/performance/find-wallets-optimizations

Performance: find wallets first render optimizations

Author: wackerow

src/components/FindWallet/MobileFiltersMenu.tsx

@@ -10,8 +10,6 @@ import {
   Flex,
 } from "@chakra-ui/react"
 
-import type { Wallet } from "@/lib/types"
-
 import { Button } from "@/components/Buttons"
 
 import OldHeading from "../OldHeading"
@@ -23,17 +21,15 @@ import WalletFilterSidebar, {
   WalletFilterSidebarProps,
 } from "./WalletFilterSidebar"
 
-import { useWalletTable } from "@/hooks/useWalletTable"
-
 type MobileFiltersMenuProps = WalletFilterSidebarProps & {
-  walletData: Wallet[]
   showMobileSidebar: boolean
   onOpen: () => void
   onClose: () => void
+  totalWallets: number
 }
 
 export const MobileFiltersMenu = ({
-  walletData,
+  totalWallets,
   filters,
   resetWalletFilter,
   resetFilters,
@@ -47,7 +43,6 @@ export const MobileFiltersMenu = ({
   onClose,
 }: MobileFiltersMenuProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
-  const { filteredWallets } = useWalletTable({ filters, t, walletData })
 
   return (
     <>
@@ -128,8 +123,7 @@ export const MobileFiltersMenu = ({
               </Box>
 
               <Button w="100%" flex={1} onClick={onClose}>
-                {t("page-find-wallet-see-wallets")}{" "}
-                {`(${filteredWallets.length})`}
+                {t("page-find-wallet-see-wallets")} {`(${totalWallets})`}
               </Button>
             </Flex>
           </DrawerBody>

src/components/FindWallet/WalletTable/index.tsx

@@ -16,7 +16,7 @@ import {
   Text,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp, Wallet, WalletFilter } from "@/lib/types"
+import type { ChildOnlyProp, WalletFilter } from "@/lib/types"
 
 import { ButtonLink } from "@/components/Buttons"
 import { WalletMoreInfo } from "@/components/FindWallet/WalletTable/WalletMoreInfo"
@@ -196,28 +196,30 @@ const FlexInfoCenter = (props: { children: ReactNode; className?: string }) => (
   />
 )
 
+type UseWalletTable = ReturnType<typeof useWalletTable>
+
 export type WalletTableProps = {
   filters: WalletFilter
   resetFilters: () => void
   resetWalletFilter: React.MutableRefObject<() => void>
-  walletData: Wallet[]
+  filteredWallets: UseWalletTable["filteredWallets"]
+  totalWallets: number
+  updateMoreInfo: (key: string) => void
+  featureDropdownItems: UseWalletTable["featureDropdownItems"]
   onOpen: () => void
 }
 
 const WalletTable = ({
   filters,
   resetFilters,
   resetWalletFilter,
-  walletData,
+  filteredWallets,
+  totalWallets,
+  updateMoreInfo,
+  featureDropdownItems,
   onOpen,
 }: WalletTableProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
-  const {
-    featureDropdownItems,
-    filteredWallets,
-    updateMoreInfo,
-    walletCardData,
-  } = useWalletTable({ filters, t, walletData })
 
   // Context API
   const { supportedLanguage } = useContext(WalletSupportedLanguageContext)
@@ -232,6 +234,17 @@ const WalletTable = ({
     })
   }
 
+  const showMoreInfo = (wallet) => {
+    updateMoreInfo(wallet.key)
+    // Log "more info" event only on expanding
+    wallet.moreInfo &&
+      trackCustomEvent({
+        eventCategory: "WalletMoreInfo",
+        eventAction: `More info wallet`,
+        eventName: `More info ${wallet.name}`,
+      })
+  }
+
   return (
     <Container>
       <WalletContentHeader>
@@ -254,16 +267,16 @@ const WalletTable = ({
               })`}
             </Text>
 
-            {filteredWallets.length === walletCardData.length ? (
+            {filteredWallets.length === totalWallets ? (
               <Text ps={{ base: 2, md: 0 }} as="span">
                 {t("page-find-wallet-showing-all-wallets")} (
-                <strong>{walletCardData.length}</strong>)
+                <strong>{totalWallets}</strong>)
               </Text>
             ) : (
               <Text ps={{ base: 2, md: 0 }} as="span">
                 {t("page-find-wallet-showing")}{" "}
                 <strong>
-                  {filteredWallets.length} / {walletCardData.length}
+                  {filteredWallets.length} / {totalWallets}
                 </strong>{" "}
                 {t("page-find-wallet-wallets")}
               </Text>
@@ -296,17 +309,6 @@ const WalletTable = ({
           const hasDeviceLabels = deviceLabels.length > 0
           const hasAllLabels = hasPersonasLabels && hasDeviceLabels
 
-          const showMoreInfo = (wallet) => {
-            updateMoreInfo(wallet.key)
-            // Log "more info" event only on expanding
-            wallet.moreInfo &&
-              trackCustomEvent({
-                eventCategory: "WalletMoreInfo",
-                eventAction: `More info wallet`,
-                eventName: `More info ${wallet.name}`,
-              })
-          }
-
           return (
             <WalletContainer
               key={wallet.key}

src/hooks/useWalletTable.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react"
+import { useContext, useState } from "react"
 
 import type { DropdownOption, Wallet, WalletFilter } from "@/lib/types"
 
@@ -120,20 +120,12 @@ export const useWalletTable = ({
     },
   ]
 
-  const [walletCardData, setWalletData] = useState(
+  const [walletCardData, setWalletData] = useState(() =>
     walletData.map((wallet) => {
       return { ...wallet, moreInfo: false, key: wallet.name }
     })
   )
 
-  useEffect(() => {
-    setWalletData(
-      walletData.map((wallet) => {
-        return { ...wallet, moreInfo: false, key: wallet.name }
-      })
-    )
-  }, [walletData])
-
   // Context API for language filter
   const { supportedLanguage } = useContext(WalletSupportedLanguageContext)
 

src/pages/wallets/find-wallet.tsx

@@ -3,7 +3,15 @@ import { GetStaticProps, InferGetStaticPropsType } from "next"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import { Box, calc, Center, Flex, Text, useDisclosure } from "@chakra-ui/react"
+import {
+  Box,
+  calc,
+  Center,
+  Flex,
+  Show,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react"
 
 import type { BasePageProps, ChildOnlyProp, Lang, Wallet } from "@/lib/types"
 
@@ -37,6 +45,7 @@ import {
 } from "@/lib/constants"
 
 import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext"
+import { useWalletTable } from "@/hooks/useWalletTable"
 import HeroImage from "@/public/images/wallets/wallet-hero.png"
 
 const Subtitle = ({ children }: ChildOnlyProp) => (
@@ -106,6 +115,13 @@ const FindWalletPage = ({
 
   const { isOpen: showMobileSidebar, onOpen, onClose } = useDisclosure()
 
+  const {
+    featureDropdownItems,
+    filteredWallets,
+    updateMoreInfo,
+    walletCardData,
+  } = useWalletTable({ filters, t, walletData: wallets })
+
   const updateFilterOption = (key) => {
     const updatedFilters = { ...filters }
     updatedFilters[key] = !updatedFilters[key]
@@ -206,7 +222,7 @@ const FindWalletPage = ({
         {/* Mobile filters menu */}
         <Box hideFrom="lg">
           <MobileFiltersMenu
-            walletData={wallets}
+            totalWallets={filteredWallets.length}
             filters={filters}
             resetWalletFilter={resetWalletFilter}
             updateFilterOption={updateFilterOption}
@@ -224,28 +240,33 @@ const FindWalletPage = ({
         <Box px={{ md: 4, "2xl": 0 }}>
           <Flex pt={4} pb={6} gap={6}>
             {/* Filters sidebar */}
-            <WalletFilterSidebar
-              hideBelow="lg"
-              top={calc(NAV_BAR_PX_HEIGHT).subtract("2px").toString()}
-              {...{
-                filters,
-                resetWalletFilter,
-                updateFilterOption,
-                updateFilterOptions,
-                resetFilters,
-                selectedPersona,
-                setFilters,
-                setSelectedPersona,
-              }}
-            />
+            {/* Use `Show` instead of `hideBelow` prop to avoid rendering the sidebar on mobile */}
+            <Show above="lg">
+              <WalletFilterSidebar
+                top={calc(NAV_BAR_PX_HEIGHT).subtract("2px").toString()}
+                {...{
+                  filters,
+                  resetWalletFilter,
+                  updateFilterOption,
+                  updateFilterOptions,
+                  resetFilters,
+                  selectedPersona,
+                  setFilters,
+                  setSelectedPersona,
+                }}
+              />
+            </Show>
 
             {/* Wallets table */}
             <Box mt={0.5} w="full">
               <WalletTable
                 filters={filters}
                 resetFilters={resetFilters}
                 resetWalletFilter={resetWalletFilter}
-                walletData={wallets}
+                filteredWallets={filteredWallets}
+                totalWallets={walletCardData.length}
+                updateMoreInfo={updateMoreInfo}
+                featureDropdownItems={featureDropdownItems}
                 onOpen={onOpen}
               />
             </Box>