fix: make number of loading rows make more sense when filtering, changing duration etc (#4781)

* fix loading

* simplify

* respond to zach

* remove console log

* simplify and eliminate tokensListLength

* respond to nit

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -75,7 +75,7 @@ export default function TokenTable() {
 
   // TODO: consider moving prefetched call into app.tsx and passing it here, use a preloaded call & updated on interval every 60s
   const chainName = validateUrlChainParam(useParams<{ chainName?: string }>().chainName)
-  const { error, loading, tokens, hasMore, loadMoreTokens, maxFetchable } = useTopTokens(chainName)
+  const { error, loading, tokens, hasMore, loadMoreTokens, loadingRowCount } = useTopTokens(chainName)
   const showMoreLoadingRows = Boolean(loading && hasMore)
 
   const observer = useRef<IntersectionObserver>()
@@ -95,7 +95,7 @@ export default function TokenTable() {
 
   /* loading and error state */
   if (loading && (!tokens || tokens?.length === 0)) {
-    return <LoadingTokenTable rowCount={PAGE_SIZE} />
+    return <LoadingTokenTable rowCount={loadingRowCount} />
   } else {
     if (error || !tokens) {
       return (
@@ -126,7 +126,7 @@ export default function TokenTable() {
                     <LoadedRow
                       key={token?.address}
                       tokenListIndex={index}
-                      tokenListLength={maxFetchable}
+                      tokenListLength={tokens.length}
                       token={token}
                       ref={index + 1 === tokens.length ? lastTokenRef : undefined}
                     />

src/graphql/data/TopTokens.ts

@@ -59,7 +59,7 @@ export enum TokenSortMethod {
 
 export type PrefetchedTopToken = NonNullable<TopTokens100Query['response']['topTokens']>[number]
 
-function useSortedTokens(tokens: TopTokens100Query['response']['topTokens']) {
+function useSortedTokens(tokens: TopTokens100Query['response']['topTokens'] | undefined) {
   const sortMethod = useAtomValue(sortMethodAtom)
   const sortAscending = useAtomValue(sortAscendingAtom)
 
@@ -167,7 +167,7 @@ interface UseTopTokensReturnValue {
   tokens: TopToken[] | undefined
   hasMore: boolean
   loadMoreTokens: () => void
-  maxFetchable: number
+  loadingRowCount: number
 }
 export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
   const duration = toHistoryDuration(useAtomValue(filterTimeAtom))
@@ -176,11 +176,14 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
   const [tokens, setTokens] = useState<TopToken[]>()
   const [page, setPage] = useState(0)
   const [error, setError] = useState<Error | undefined>()
-  const [prefetchedData, setPrefetchedData] = useState<PrefetchedTopToken[]>([])
+  const [prefetchedData, setPrefetchedData] = useState<PrefetchedTopToken[]>()
   const prefetchedSelectedTokensWithoutPriceHistory = useFilteredTokens(useSortedTokens(prefetchedData))
-  const maxFetchable = useMemo(
-    () => prefetchedSelectedTokensWithoutPriceHistory.length,
-    [prefetchedSelectedTokensWithoutPriceHistory]
+  const loading = Boolean(loadingTokensWithPriceHistory || loadingTokensWithoutPriceHistory)
+  // loadingRowCount defaults to PAGE_SIZE when no prefetchedData is available yet because the initial load
+  // count will always be PAGE_SIZE.
+  const loadingRowCount = useMemo(
+    () => (prefetchedData ? Math.min(prefetchedSelectedTokensWithoutPriceHistory.length, PAGE_SIZE) : PAGE_SIZE),
+    [prefetchedSelectedTokensWithoutPriceHistory, prefetchedData]
   )
 
   const hasMore = !tokens || tokens.length < prefetchedSelectedTokensWithoutPriceHistory.length
@@ -276,11 +279,11 @@ export function useTopTokens(chain: Chain): UseTopTokensReturnValue {
 
   return {
     error,
-    loading: loadingTokensWithPriceHistory || loadingTokensWithoutPriceHistory,
+    loading,
     tokens,
     hasMore,
     loadMoreTokens,
-    maxFetchable,
+    loadingRowCount,
   }
 }