fixed constant spinner in viewAll pages

packages/wallet/src/views/Home/components/AssetSummary/index.tsx

@@ -4,7 +4,6 @@ import { useWalletSettings } from '@0xsequence/kit'
 import { useAccount } from 'wagmi'
 
 import { useBalancesAssetsSummary, useNavigation, useSettings } from '../../../../hooks'
-import { sortBalancesByType } from '../../../../utils'
 
 import { CoinTile } from './CoinTile'
 import { CollectibleTile } from './CollectibleTile'
@@ -18,7 +17,6 @@ export const AssetSummary = () => {
   const { hideUnlistedTokens, hideCollectibles, selectedNetworks } = useSettings()
 
   const pageSize = 10
-  const [initTokensFlag, setInitTokensFlag] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [displayedTokens, setDisplayedTokens] = useState<TokenBalance[]>([])
   const [hasMoreTokens, setHasMoreTokens] = useState(false)
@@ -63,12 +61,12 @@ export const AssetSummary = () => {
   })
 
   useEffect(() => {
-    if (!initTokensFlag && balances.length > 0) {
+    if (!isPendingBalances && balances.length > 0) {
       setDisplayedTokens(balances.slice(0, pageSize))
       setHasMoreTokens(balances.length > pageSize)
-      setInitTokensFlag(true)
     }
-  }, [balances])
+    // only runs once after balances are fetched
+  }, [balances, isPendingBalances])
 
   if (isPendingBalances) {
     return <SkeletonTiles />

packages/wallet/src/views/Search/SearchWalletViewAll.tsx

@@ -1,4 +1,4 @@
-import { Box, SearchIcon, Skeleton, Spinner, TabsContent, TabsHeader, TabsRoot, Text, TextInput } from '@0xsequence/design-system'
+import { Box, SearchIcon, Skeleton, TabsContent, TabsHeader, TabsRoot, TextInput } from '@0xsequence/design-system'
 import {
   getNativeTokenInfoByChainId,
   useExchangeRate,
@@ -39,8 +39,14 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
   const [displayedSearchCoinBalances, setDisplayedSearchCoinBalances] = useState<IndexedData[]>([])
   const [displayedSearchCollectionBalances, setDisplayedSearchCollectionBalances] = useState<IndexedData[]>([])
 
-  const [initCoinBalancesFlag, setInitCoinBalancesFlag] = useState(false)
-  const [initCollectionBalancesFlag, setInitCollectionBalancesFlag] = useState(false)
+  const [initCoinsFlag, setInitCoinsFlag] = useState(false)
+  const [initCollectionsFlag, setInitCollectionsFlag] = useState(false)
+
+  const [hasMoreCoins, sethasMoreCoins] = useState(false)
+  const [hasMoreCollections, sethasMoreCollections] = useState(false)
+
+  const [hasMoreSearchCoins, sethasMoreSearchCoins] = useState(false)
+  const [hasMoreSearchCollections, sethasMoreSearchCollections] = useState(false)
 
   const { address: accountAddress } = useAccount()
 
@@ -116,11 +122,20 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
   }))
 
   useEffect(() => {
-    if (!initCoinBalancesFlag && indexedCoinBalances.length > 0) {
+    if (!initCoinsFlag && indexedCoinBalances.length > 0) {
       setDisplayedCoinBalances(indexedCoinBalances.slice(0, pageSize))
-      setInitCoinBalancesFlag(true)
+      sethasMoreCoins(indexedCoinBalances.length > pageSize)
+      setInitCoinsFlag(true)
+    }
+  }, [initCoinsFlag])
+
+  useEffect(() => {
+    if (!initCollectionsFlag && indexedCollectionBalances.length > 0) {
+      setDisplayedCollectionBalances(indexedCollectionBalances.slice(0, pageSize))
+      sethasMoreCollections(indexedCollectionBalances.length > pageSize)
+      setInitCollectionsFlag(true)
     }
-  }, [indexedCoinBalances])
+  }, [initCollectionsFlag])
 
   useEffect(() => {
     if (search !== '') {
@@ -130,16 +145,10 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
           .map(result => result.item)
           .slice(0, pageSize)
       )
+      sethasMoreSearchCoins(fuzzySearchCoinBalances.search(search).length > pageSize)
     }
   }, [search])
 
-  useEffect(() => {
-    if (!initCollectionBalancesFlag && indexedCollectionBalances.length > 0) {
-      setDisplayedCollectionBalances(indexedCollectionBalances.slice(0, pageSize))
-      setInitCollectionBalancesFlag(true)
-    }
-  }, [indexedCollectionBalances])
-
   useEffect(() => {
     if (search !== '') {
       setDisplayedSearchCollectionBalances(
@@ -148,25 +157,29 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
           .map(result => result.item)
           .slice(0, pageSize)
       )
+      sethasMoreSearchCollections(fuzzySearchCollections.search(search).length > pageSize)
     }
   }, [search])
 
   const fetchMoreCoinBalances = () => {
     if (displayedCoinBalances.length >= indexedCoinBalances.length) {
+      sethasMoreCoins(false)
       return
     }
     setDisplayedCoinBalances(indexedCoinBalances.slice(0, displayedCoinBalances.length + pageSize))
   }
 
   const fetchMoreCollectionBalances = () => {
     if (displayedCollectionBalances.length >= indexedCollectionBalances.length) {
+      sethasMoreCollections(false)
       return
     }
     setDisplayedCollectionBalances(indexedCollectionBalances.slice(0, displayedCollectionBalances.length + pageSize))
   }
 
   const fetchMoreSearchCoinBalances = () => {
     if (displayedSearchCoinBalances.length >= fuzzySearchCoinBalances.search(search).length) {
+      sethasMoreSearchCoins(false)
       return
     }
     setDisplayedSearchCoinBalances(
@@ -179,6 +192,7 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
 
   const fetchMoreSearchCollectionBalances = () => {
     if (displayedSearchCollectionBalances.length >= fuzzySearchCollections.search(search).length) {
+      sethasMoreSearchCollections(false)
       return
     }
     setDisplayedSearchCollectionBalances(
@@ -231,6 +245,8 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
               displayedCollectionBalances={search ? displayedSearchCollectionBalances : displayedCollectionBalances}
               fetchMoreCollectionBalances={fetchMoreCollectionBalances}
               fetchMoreSearchCollectionBalances={fetchMoreSearchCollectionBalances}
+              hasMoreCollections={hasMoreCollections}
+              hasMoreSearchCollections={hasMoreSearchCollections}
               isSearching={search !== ''}
               isPending={isPending}
               collectionBalances={collectionBalances}
@@ -242,6 +258,8 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
               displayedCoinBalances={search ? displayedSearchCoinBalances : displayedCoinBalances}
               fetchMoreCoinBalances={fetchMoreCoinBalances}
               fetchMoreSearchCoinBalances={fetchMoreSearchCoinBalances}
+              hasMoreCoins={hasMoreCoins}
+              hasMoreSearchCoins={hasMoreSearchCoins}
               isSearching={search !== ''}
               isPending={isPending}
               coinBalances={coinBalances}

packages/wallet/src/views/Search/components/CoinsTab.tsx

@@ -9,6 +9,8 @@ interface CoinsTabProps {
   displayedCoinBalances: IndexedData[]
   fetchMoreCoinBalances: () => void
   fetchMoreSearchCoinBalances: () => void
+  hasMoreCoins: boolean
+  hasMoreSearchCoins: boolean
   isSearching: boolean
   isPending: boolean
   coinBalances: TokenBalance[]
@@ -18,6 +20,8 @@ const CoinsTab: React.FC<CoinsTabProps> = ({
   displayedCoinBalances,
   fetchMoreCoinBalances,
   fetchMoreSearchCoinBalances,
+  hasMoreCoins,
+  hasMoreSearchCoins,
   isSearching,
   isPending,
   coinBalances
@@ -31,14 +35,17 @@ const CoinsTab: React.FC<CoinsTabProps> = ({
 
     const observer = new IntersectionObserver(entries => {
       const endOfPage = entries[0]
-      if (endOfPage.isIntersecting) {
+      if (!endOfPage.isIntersecting) return
+      if (isSearching && hasMoreSearchCoins) {
         setIsLoading(true)
         setTimeout(() => {
-          if (isSearching) {
-            fetchMoreSearchCoinBalances()
-          } else {
-            fetchMoreCoinBalances()
-          }
+          fetchMoreSearchCoinBalances()
+          setIsLoading(false)
+        }, 500)
+      } else if (!isSearching && hasMoreCoins) {
+        setIsLoading(true)
+        setTimeout(() => {
+          fetchMoreCoinBalances()
           setIsLoading(false)
         }, 500)
       }

packages/wallet/src/views/Search/components/CollectionsTab.tsx

@@ -9,6 +9,8 @@ interface CollectionsTabProps {
   displayedCollectionBalances: IndexedData[]
   fetchMoreCollectionBalances: () => void
   fetchMoreSearchCollectionBalances: () => void
+  hasMoreCollections: boolean
+  hasMoreSearchCollections: boolean
   isSearching: boolean
   isPending: boolean
   collectionBalances: TokenBalance[]
@@ -18,6 +20,8 @@ const CollectionsTab: React.FC<CollectionsTabProps> = ({
   displayedCollectionBalances,
   fetchMoreCollectionBalances,
   fetchMoreSearchCollectionBalances,
+  hasMoreCollections,
+  hasMoreSearchCollections,
   isSearching,
   isPending,
   collectionBalances
@@ -31,19 +35,21 @@ const CollectionsTab: React.FC<CollectionsTabProps> = ({
 
     const observer = new IntersectionObserver(entries => {
       const endOfPage = entries[0]
-      if (endOfPage.isIntersecting) {
+      if (!endOfPage.isIntersecting) return
+      if (isSearching && hasMoreSearchCollections) {
         setIsLoading(true)
         setTimeout(() => {
-          if (isSearching) {
-            fetchMoreSearchCollectionBalances()
-          } else {
-            fetchMoreCollectionBalances()
-          }
+          fetchMoreSearchCollectionBalances()
+          setIsLoading(false)
+        }, 500)
+      } else if (!isSearching && hasMoreCollections) {
+        setIsLoading(true)
+        setTimeout(() => {
+          fetchMoreCollectionBalances()
           setIsLoading(false)
         }, 500)
       }
     })
-
     observer.observe(endOfPageRefCollections.current)
 
     return () => {