fix: infinite scroll not working if screen is very big on wallet (#7971)

src/components/EarnDashboard/components/ProviderDetails/WalletLpByAsset.tsx

@@ -54,7 +54,9 @@ export const WalletLpByAsset: React.FC<WalletLpByAssetProps> = ({ opportunities
     [groupedItems],
   )
 
-  const { next, data, hasMore } = useInfiniteScroll(flatItems)
+  const { next, data, hasMore } = useInfiniteScroll({
+    array: flatItems,
+  })
 
   const handleClick = useCallback(
     (opportunity: LpEarnOpportunityType, action: DefiAction) => {

src/components/EarnDashboard/components/ProviderDetails/WalletStakingByAsset.tsx

@@ -56,7 +56,9 @@ export const WalletStakingByAsset: React.FC<StakingPositionsByAssetProps> = ({ o
     () => groupedItems.flatMap(item => (Array.isArray(item) ? item.flat() : [item])),
     [groupedItems],
   )
-  const { next, data, hasMore } = useInfiniteScroll(flatItems)
+  const { next, data, hasMore } = useInfiniteScroll({
+    array: flatItems,
+  })
 
   const handleClick = useCallback(
     (opportunity: StakingEarnOpportunityType, action: DefiAction) => {

src/components/MarketsTable.tsx

@@ -37,7 +37,9 @@ export const MarketsTable: React.FC<MarketsTableProps> = memo(({ rows, onRowClic
   const marketDataUserCurrencyById = useAppSelector(selectMarketDataUserCurrency)
   const isMarketDataLoaded = useAppSelector(selectIsMarketDataLoaded)
 
-  const { hasMore, next, data } = useInfiniteScroll(rows)
+  const { hasMore, next, data } = useInfiniteScroll({
+    array: rows,
+  })
   const handleTradeClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation()

src/components/ReactTable/InfiniteTable.tsx

@@ -1,6 +1,7 @@
 import { ArrowDownIcon, ArrowUpIcon } from '@chakra-ui/icons'
 import type { TableProps } from '@chakra-ui/react'
 import {
+  Button,
   Flex,
   Skeleton,
   Table,
@@ -18,7 +19,6 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { useTranslate } from 'react-polyglot'
 import type { Column, Row, TableState } from 'react-table'
 import { useExpanded, useSortBy, useTable } from 'react-table'
-import { RawText } from 'components/Text'
 
 type ReactTableProps<T extends {}> = {
   columns: Column<T>[]
@@ -39,8 +39,23 @@ type ReactTableProps<T extends {}> = {
 
 const tdStyle = { padding: 0 }
 const tableSize = { base: 'sm', md: 'md' }
+const SCROLL_TRESHOLD = 0.4
 
-const loader = <RawText>Loading...</RawText>
+const Loader = () => {
+  const translate = useTranslate()
+
+  return (
+    <Button
+      className='infinite-loader'
+      isDisabled={true}
+      variant='outline'
+      isLoading={true}
+      loadingText={translate('common.loadingText')}
+      width='100%'
+      mb={2}
+    ></Button>
+  )
+}
 
 export const InfiniteTable = <T extends {}>({
   columns,
@@ -138,15 +153,25 @@ export const InfiniteTable = <T extends {}>({
     visibleColumns.length,
   ])
 
+  const loader = useMemo(() => <Loader />, [])
+
   return (
     <InfiniteScroll
       hasMore={hasMore}
       next={loadMore}
       dataLength={data.length}
       loader={loader}
       scrollableTarget={scrollableTarget}
+      hasChildren={true}
+      scrollThreshold={SCROLL_TRESHOLD}
     >
-      <Table ref={tableRef} variant={variant} size={tableSize} {...getTableProps()}>
+      <Table
+        ref={tableRef}
+        variant={variant}
+        size={tableSize}
+        {...getTableProps()}
+        className='infinite-table'
+      >
         {displayHeaders && (
           <Thead>
             {headerGroups.map(headerGroup => (

src/components/TransactionHistory/TransactionHistoryList.tsx

@@ -17,7 +17,10 @@ type TransactionHistoryListProps = {
 
 export const TransactionHistoryList: React.FC<TransactionHistoryListProps> = memo(
   ({ txIds, useCompactMode = false, initialTxsCount }) => {
-    const { next, data, hasMore } = useInfiniteScroll(txIds, initialTxsCount)
+    const { next, data, hasMore } = useInfiniteScroll({
+      array: txIds,
+      initialTxsCount,
+    })
     const isAnyTxHistoryApiQueryPending = useAppSelector(selectIsAnyTxHistoryApiQueryPending)
     const translate = useTranslate()
 

src/hooks/useInfiniteScroll/useInfiniteScroll.tsx

@@ -1,8 +1,18 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 const defaultAmount = 20
 
-export const useInfiniteScroll = <T extends any>(array: T[], initialTxsCount?: number) => {
+type UseInfiniteScrollProps<T> = {
+  array: T[]
+  initialTxsCount?: number
+  isScrollable?: boolean
+}
+
+export const useInfiniteScroll = <T extends any>({
+  array,
+  initialTxsCount,
+  isScrollable = false,
+}: UseInfiniteScrollProps<T>) => {
   const [amount, setAmount] = useState(initialTxsCount ?? defaultAmount)
 
   const next = useCallback(() => {
@@ -12,6 +22,23 @@ export const useInfiniteScroll = <T extends any>(array: T[], initialTxsCount?: n
   const data = useMemo(() => array.slice(0, amount), [amount, array])
   const hasMore = useMemo(() => array.length !== data.length, [data, array])
 
+  useEffect(() => {
+    if (!isScrollable) return
+
+    const firstLoaderItem = document.querySelector('.infinite-table tbody tr:last-of-type')
+    const scrollContainer = document.querySelector('html')
+
+    if (!firstLoaderItem || !scrollContainer) {
+      return
+    }
+    if (
+      // The loading will continue only when the loader element appears on the scroll-container.
+      firstLoaderItem.getBoundingClientRect().top < window.innerHeight
+    ) {
+      next()
+    }
+  }, [hasMore, isScrollable, next])
+
   return {
     next,
     data,

src/pages/Dashboard/components/AccountList/AccountTable.tsx

@@ -34,7 +34,10 @@ export const AccountTable = memo(() => {
   const sortedRows = useMemo(() => {
     return rowData.sort((a, b) => Number(b.fiatAmount) - Number(a.fiatAmount))
   }, [rowData])
-  const { hasMore, next, data } = useInfiniteScroll(sortedRows)
+  const { hasMore, next, data } = useInfiniteScroll({
+    array: sortedRows,
+    isScrollable: true,
+  })
   const textColor = useColorModeValue('black', 'white')
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
   const history = useHistory()