chore: making lists faster

Emurgo · May 6, 2024 · 3e9df52 · 3e9df52
1 parent f3cb982
commit 3e9df52
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 35 deletions.
diff --git a/apps/wallet-mobile/src/Nfts/Nfts.tsx b/apps/wallet-mobile/src/Nfts/Nfts.tsx
@@ -35,7 +35,8 @@ export const Nfts = () => {
   const {search, isSearching} = useSearch()
 
   const filteredAmounts = React.useMemo(() => {
-    return isSearching ? balances.nfts.filter(({info}) => infoFilterByName(search)(info)) : balances.nfts
+    const byName = infoFilterByName(search)
+    return isSearching ? balances.nfts.filter(({info}) => byName(info)) : balances.nfts
   }, [balances.nfts, isSearching, search])
 
   useFocusEffect(

diff --git a/...reateOrder/EditSellAmount/SelectSellTokenFromListScreen/SelectSellTokenFromListScreen.tsx b/...reateOrder/EditSellAmount/SelectSellTokenFromListScreen/SelectSellTokenFromListScreen.tsx
@@ -43,9 +43,20 @@ const TokenList = () => {
   const {search, isSearching} = useSearch()
 
   const filteredAmounts = React.useMemo(() => {
-    return isSearching ? balances.fts.filter(({info}) => infoFilterByName(search)(info)) : balances.fts
+    const byName = infoFilterByName(search)
+    return isSearching ? balances.fts.filter(({info}) => byName(info)) : balances.fts
   }, [balances.fts, isSearching, search])
 
+  const [loadedAmounts, setLoadedAmounts] = React.useState(filteredAmounts.slice(0, batchSize))
+  const [currentIndex, setCurrentIndex] = React.useState(batchSize)
+
+  const handleOnEndReached = React.useCallback(() => {
+    if (currentIndex >= filteredAmounts.length) return
+    const nextBatch = filteredAmounts.slice(currentIndex, currentIndex + batchSize)
+    setLoadedAmounts([...loadedAmounts, ...nextBatch])
+    setCurrentIndex(currentIndex + batchSize)
+  }, [currentIndex, filteredAmounts, loadedAmounts])
+
   return (
     <View style={styles.list}>
       {filteredAmounts?.length > 0 && (
@@ -63,13 +74,15 @@ const TokenList = () => {
       )}
 
       <FlashList
-        data={filteredAmounts}
+        data={isSearching ? filteredAmounts : loadedAmounts}
         renderItem={({item: amount}) => <SelectableToken amount={amount} />}
         bounces={false}
         keyExtractor={(_, index) => index.toString()}
         testID="assetsList"
         estimatedItemSize={72}
         ListEmptyComponent={<Empty />}
+        onEndReached={handleOnEndReached}
+        onEndReachedThreshold={0.5}
       />
 
       <Counter
@@ -147,6 +160,8 @@ const Empty = () => {
   )
 }
 
+const batchSize = 20
+
 const useStyles = () => {
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({

diff --git a/apps/wallet-mobile/translations/messages/src/Nfts/Nfts.json b/apps/wallet-mobile/translations/messages/src/Nfts/Nfts.json
@@ -4,119 +4,119 @@
     "defaultMessage": "!!!NFT count",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 162,
+      "line": 163,
       "column": 12,
-      "index": 4260
+      "index": 4286
     },
     "end": {
-      "line": 165,
+      "line": 166,
       "column": 3,
-      "index": 4333
+      "index": 4359
     }
   },
   {
     "id": "nft.gallery.errorTitle",
     "defaultMessage": "!!!Oops!",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 166,
+      "line": 167,
       "column": 14,
-      "index": 4349
+      "index": 4375
     },
     "end": {
-      "line": 169,
+      "line": 170,
       "column": 3,
-      "index": 4420
+      "index": 4446
     }
   },
   {
     "id": "nft.gallery.errorDescription",
     "defaultMessage": "!!!Something went wrong.",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 170,
+      "line": 171,
       "column": 20,
-      "index": 4442
+      "index": 4468
     },
     "end": {
-      "line": 173,
+      "line": 174,
       "column": 3,
-      "index": 4535
+      "index": 4561
     }
   },
   {
     "id": "nft.gallery.reloadApp",
     "defaultMessage": "!!!Try to restart the app.",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 174,
+      "line": 175,
       "column": 13,
-      "index": 4550
+      "index": 4576
     },
     "end": {
-      "line": 177,
+      "line": 178,
       "column": 3,
-      "index": 4638
+      "index": 4664
     }
   },
   {
     "id": "nft.gallery.noNftsFound",
     "defaultMessage": "!!!No NFTs found",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 178,
+      "line": 179,
       "column": 15,
-      "index": 4655
+      "index": 4681
     },
     "end": {
-      "line": 181,
+      "line": 182,
       "column": 3,
-      "index": 4735
+      "index": 4761
     }
   },
   {
     "id": "nft.gallery.noNftsInWallet",
     "defaultMessage": "!!!No NFTs added to your wallet yet",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 182,
+      "line": 183,
       "column": 18,
-      "index": 4755
+      "index": 4781
     },
     "end": {
-      "line": 185,
+      "line": 186,
       "column": 3,
-      "index": 4857
+      "index": 4883
     }
   },
   {
     "id": "nft.navigation.title",
     "defaultMessage": "!!!NFT Gallery",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 186,
+      "line": 187,
       "column": 9,
-      "index": 4868
+      "index": 4894
     },
     "end": {
-      "line": 189,
+      "line": 190,
       "column": 3,
-      "index": 4943
+      "index": 4969
     }
   },
   {
     "id": "nft.navigation.search",
     "defaultMessage": "!!!Search NFT",
     "file": "src/Nfts/Nfts.tsx",
     "start": {
-      "line": 190,
+      "line": 191,
       "column": 10,
-      "index": 4955
+      "index": 4981
     },
     "end": {
-      "line": 193,
+      "line": 194,
       "column": 3,
-      "index": 5030
+      "index": 5056
     }
   }
 ]