fix: virtualized rows

TalismanSociety · Oct 18, 2023 · f0a60ce · f0a60ce
1 parent 253eb0d
commit f0a60ce
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Networks/ChainsList.tsx b/apps/extension/src/ui/apps/dashboard/routes/Networks/ChainsList.tsx
@@ -103,8 +103,8 @@ const ChainsListItem = ({
   }, [navigate, chain.id])
 
   // there are lots of chains so we should only render visible rows to prevent performance issues
-  const refButton = useRef<HTMLButtonElement>(null)
-  const intersection = useIntersection(refButton, {
+  const refContainer = useRef<HTMLDivElement>(null)
+  const intersection = useIntersection(refContainer, {
     root: null,
     rootMargin: "1000px",
   })
@@ -116,27 +116,27 @@ const ChainsListItem = ({
     [onEnableChanged]
   )
 
-  const buttonContent = intersection?.isIntersecting ? (
+  const rowContent = intersection?.isIntersecting ? (
     <>
-      <ChainLogo className="rounded-full text-xl" id={chain.id} />
-      <div className="text-body grow truncate">{chain.name}</div>
-      {chain.isTestnet && <TestnetPill />}
-      {isCustomChain(chain) && <CustomPill />}
-      <div className="min-w-[4.4rem] shrink-0 grow"></div>
-      <ChevronRightIcon className="transition-noneshrink-0 text-lg" />
-    </>
-  ) : null
-
-  return (
-    <div className="relative h-28">
-      <ListButton ref={refButton} key={chain.id} role="button" onClick={handleChainClick}>
-        {buttonContent}
+      <ListButton key={chain.id} role="button" onClick={handleChainClick}>
+        <ChainLogo className="rounded-full text-xl" id={chain.id} />
+        <div className="text-body truncate">{chain.name}</div>
+        {chain.isTestnet && <TestnetPill />}
+        {isCustomChain(chain) && <CustomPill />}
+        <div className="min-w-[4.4rem] shrink-0 grow"></div>
+        <ChevronRightIcon className="transition-noneshrink-0 text-lg" />
       </ListButton>
       <Toggle
         className="absolute right-20 top-4 p-4"
         checked={isEnabled}
         onChange={handleEnableChanged}
       />
+    </>
+  ) : null
+
+  return (
+    <div ref={refContainer} className="relative h-28">
+      {rowContent}
     </div>
   )
 }
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Networks/EvmNetworksList.tsx b/apps/extension/src/ui/apps/dashboard/routes/Networks/EvmNetworksList.tsx
@@ -116,8 +116,8 @@ const EvmNetworksListItem = ({
   }, [navigate, network.id])
 
   // there are lots of networks so we should only render visible rows to prevent performance issues
-  const refButton = useRef<HTMLButtonElement>(null)
-  const intersection = useIntersection(refButton, {
+  const refContainer = useRef<HTMLDivElement>(null)
+  const intersection = useIntersection(refContainer, {
     root: null,
     rootMargin: "1000px",
   })
@@ -129,27 +129,27 @@ const EvmNetworksListItem = ({
     [onEnableChanged]
   )
 
-  const buttonContent = intersection?.isIntersecting ? (
+  const rowContent = intersection?.isIntersecting ? (
     <>
-      <ChainLogo className="rounded-full text-xl" id={network.id} />
-      <div className="text-body truncate">{network.name}</div>
-      {network.isTestnet && <TestnetPill />}
-      {isCustomEvmNetwork(network) && <CustomPill />}
-      <div className="min-w-[5rem] shrink-0 grow"></div>
-      <ChevronRightIcon className="shrink-0 text-lg transition-none" />
-    </>
-  ) : null
-
-  return (
-    <div className="relative h-28">
-      <ListButton ref={refButton} key={network.id} role="button" onClick={handleNetworkClick}>
-        {buttonContent}
+      <ListButton key={network.id} role="button" onClick={handleNetworkClick}>
+        <ChainLogo className="rounded-full text-xl" id={network.id} />
+        <div className="text-body truncate">{network.name}</div>
+        {network.isTestnet && <TestnetPill />}
+        {isCustomEvmNetwork(network) && <CustomPill />}
+        <div className="min-w-[5rem] shrink-0 grow"></div>
+        <ChevronRightIcon className="shrink-0 text-lg transition-none" />
       </ListButton>
       <Toggle
         className="absolute right-20 top-4 p-4"
         checked={isEnabled}
         onChange={handleEnableChanged}
       />
+    </>
+  ) : null
+
+  return (
+    <div ref={refContainer} className="relative h-28">
+      {rowContent}
     </div>
   )
 }
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Tokens/TokensPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Tokens/TokensPage.tsx
@@ -17,9 +17,10 @@ import { useTokensEnabledState } from "@ui/hooks/useTokensEnabledState"
 import { isCustomErc20Token } from "@ui/util/isCustomErc20Token"
 import { isErc20Token } from "@ui/util/isErc20Token"
 import sortBy from "lodash/sortBy"
-import { ChangeEventHandler, FC, useCallback, useMemo, useState } from "react"
+import { ChangeEventHandler, FC, useCallback, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
+import { useIntersection } from "react-use"
 import { ListButton, PillButton, Toggle } from "talisman-ui"
 
 import { DashboardLayout } from "../../layout/DashboardLayout"
@@ -48,8 +49,15 @@ const TokenRow = ({ token }: { token: Erc20Token }) => {
     [token.id]
   )
 
-  return (
-    <div className="relative h-28 w-full">
+  // there are lots of tokens so we should only render visible rows to prevent performance issues
+  const refContainer = useRef<HTMLDivElement>(null)
+  const intersection = useIntersection(refContainer, {
+    root: null,
+    rootMargin: "1000px",
+  })
+
+  const rowContent = intersection?.isIntersecting ? (
+    <>
       <ListButton onClick={() => navigate(`./${token.id}`)}>
         <TokenLogo tokenId={token.id} className="rounded-full text-xl" />
         <div className="flex flex-col !items-start justify-center overflow-hidden">
@@ -65,6 +73,12 @@ const TokenRow = ({ token }: { token: Erc20Token }) => {
         checked={isEnabled}
         onChange={handleEnableChanged}
       />
+    </>
+  ) : null
+
+  return (
+    <div ref={refContainer} className="relative h-28 w-full">
+      {rowContent}
     </div>
   )
 }