feature(wallet-mobile): portfolio token list performance improvement (#…

…3754)
Emurgo · Dec 5, 2024 · 918273d · 918273d
1 parent 131b732
commit 918273d
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/...tfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/PortfolioWalletTokenList.tsx b/...tfolio/useCases/PortfolioTokensList/PortfolioWalletTokenList/PortfolioWalletTokenList.tsx
@@ -1,9 +1,10 @@
 import {useFocusEffect} from '@react-navigation/native'
+import {FlashList} from '@shopify/flash-list'
 import {infoExtractName, isPrimaryToken} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {Chain, Portfolio} from '@yoroi/types'
 import * as React from 'react'
-import {FlatList, StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 
 import {Spacer} from '../../../../../components/Spacer/Spacer'
 import {useMetrics} from '../../../../../kernel/metrics/metricsManager'
@@ -90,6 +91,22 @@ export const PortfolioWalletTokenList = () => {
 
   const isPreprod = network === Chain.Network.Preprod
 
+  const [loadedTokens, setLoadedTokens] = React.useState(getListTokens.slice(0, batchSize))
+  const [currentIndex, setCurrentIndex] = React.useState(batchSize)
+
+  React.useEffect(() => {
+    setLoadedTokens(getListTokens.slice(0, currentIndex + batchSize))
+    setCurrentIndex(currentIndex + batchSize)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tokensList]) // must be tokensList
+
+  const handleOnEndReached = React.useCallback(() => {
+    if (currentIndex >= getListTokens.length) return
+    const nextBatch = getListTokens.slice(currentIndex, currentIndex + batchSize)
+    setLoadedTokens([...loadedTokens, ...nextBatch])
+    setCurrentIndex(currentIndex + batchSize)
+  }, [currentIndex, getListTokens, loadedTokens])
+
   const renderFooterList = () => {
     if (isSearching) return null
     if (isLoading) {
@@ -126,8 +143,8 @@ export const PortfolioWalletTokenList = () => {
 
   return (
     <View style={styles.root}>
-      <FlatList
-        data={getListTokens}
+      <FlashList
+        data={loadedTokens}
         ListHeaderComponent={
           <HeadingList
             isShowBalanceCard={!isSearching}
@@ -141,6 +158,9 @@ export const PortfolioWalletTokenList = () => {
         renderItem={({item}) => <TokenBalanceItem amount={item} />}
         contentContainerStyle={styles.container}
         ListEmptyComponent={() => <TokenEmptyList />}
+        onEndReached={handleOnEndReached}
+        onEndReachedThreshold={0.5}
+        estimatedItemSize={72}
       />
     </View>
   )
@@ -185,6 +205,8 @@ const SkeletonItem = () => {
   )
 }
 
+const batchSize = 50
+
 const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({