Speed up txlist and walletlist loading

EdgeApp · Jan 15, 2024 · d70635a · d70635a
1 parent 5a6e2ac
commit d70635a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git a/src/components/common/EdgeAnim.tsx b/src/components/common/EdgeAnim.tsx
@@ -19,6 +19,7 @@ import Animated, {
 
 export const DEFAULT_ANIMATION_DURATION_MS = 300
 export const LAYOUT_ANIMATION = LinearTransition.duration(DEFAULT_ANIMATION_DURATION_MS)
+export const MAX_LIST_ITEMS_ANIM = 10
 
 type AnimBuilder = typeof ComplexAnimationBuilder
 type AnimTypeFadeIns = 'fadeIn' | 'fadeInDown' | 'fadeInUp' | 'fadeInLeft' | 'fadeInRight'
@@ -33,6 +34,12 @@ interface Anim {
 }
 
 interface Props extends AnimateProps<ViewProps> {
+  /**
+   * disable animation
+   * anim => disable animation but still render a container view
+   * view => render the children with no container view
+   * */
+  disable?: 'anim' | 'view'
   enter?: Anim
   exit?: Anim
 
@@ -80,13 +87,17 @@ const getAnimBuilder = (anim?: Anim) => {
   return builder
 }
 
-export const EdgeAnim = ({ children, enter, exit, ios = false, visible = true, ...rest }: Props) => {
+export const EdgeAnim = ({ children, disable, enter, exit, ios = false, visible = true, ...rest }: Props): JSX.Element | null => {
   if (!visible) return null
   const entering = getAnimBuilder(enter)
   const exiting = getAnimBuilder(exit)
 
-  if (ios && Platform.OS !== 'ios') {
-    return <Animated.View>{children}</Animated.View>
+  if (disable === 'anim' || (ios && Platform.OS !== 'ios')) {
+    return <Animated.View {...rest}>{children}</Animated.View>
+  }
+
+  if (disable === 'view') {
+    return <>{children}</>
   }
 
   return (

diff --git a/src/components/scenes/CoinRankingScene.tsx b/src/components/scenes/CoinRankingScene.tsx
@@ -15,7 +15,7 @@ import { useSelector } from '../../types/reactRedux'
 import { EdgeSceneProps } from '../../types/routerTypes'
 import { debugLog, enableDebugLogType, LOG_COINRANK } from '../../util/logger'
 import { fetchRates } from '../../util/network'
-import { EdgeAnim } from '../common/EdgeAnim'
+import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { SceneWrapper, SceneWrapperInfo } from '../common/SceneWrapper'
 import { CoinRankRow } from '../data/row/CoinRankRow'
 import { showError } from '../services/AirshipInstance'
@@ -81,8 +81,9 @@ const CoinRankingComponent = (props: Props) => {
     const key = `${index}-${item}-${rank}-${currencyCode}-${lastUsedFiat}`
     debugLog(LOG_COINRANK, `renderItem ${key.toString()}`)
 
+    const disable = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined
     return (
-      <EdgeAnim enter={{ type: 'fadeInRight', distance: 20 * (index + 1) }}>
+      <EdgeAnim disable={disable} enter={{ type: 'fadeInDown', distance: 20 * (index + 1) }}>
         <CoinRankRow
           navigation={navigation}
           index={item}

diff --git a/src/components/scenes/TransactionListScene.tsx b/src/components/scenes/TransactionListScene.tsx
@@ -22,7 +22,7 @@ import { FlatListItem } from '../../types/types'
 import { fetchInfo } from '../../util/network'
 import { calculateSpamThreshold, darkenHexColor, unixToLocaleDateTime, zeroString } from '../../util/utils'
 import { AssetStatusCard } from '../cards/AssetStatusCard'
-import { EdgeAnim } from '../common/EdgeAnim'
+import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { SceneWrapper, SceneWrapperInfo } from '../common/SceneWrapper'
 import { withWallet } from '../hoc/withWallet'
 import { useTheme } from '../services/ThemeContext'
@@ -225,15 +225,17 @@ function TransactionListComponent(props: Props) {
     if (item == null) {
       return <EmptyLoader />
     }
+
+    const disable = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined
     if (typeof item === 'string') {
       return (
-        <EdgeAnim enter={{ type: 'fadeInLeft', distance: 30 * (index + 1) }}>
+        <EdgeAnim disable={disable} enter={{ type: 'fadeInDown', distance: 30 * (index + 1) }}>
           <SectionHeader title={item} />
         </EdgeAnim>
       )
     }
     return (
-      <EdgeAnim enter={{ type: 'fadeInRight', distance: 30 * (index + 1) }}>
+      <EdgeAnim disable={disable} enter={{ type: 'fadeInDown', distance: 30 * (index + 1) }}>
         <TransactionListRow navigation={navigation} transaction={item} wallet={wallet} />
       </EdgeAnim>
     )

diff --git a/src/components/themed/WalletListSwipeable.tsx b/src/components/themed/WalletListSwipeable.tsx
@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from '../../types/reactRedux'
 import { NavigationProp } from '../../types/routerTypes'
 import { FlatListItem } from '../../types/types'
 import { getTokenIdForced } from '../../util/CurrencyInfoHelpers'
-import { EdgeAnim } from '../common/EdgeAnim'
+import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { InsetStyles } from '../common/SceneWrapper'
 import { searchWalletList } from '../services/SortedWalletList'
 import { useTheme } from '../services/ThemeContext'
@@ -101,16 +101,17 @@ function WalletListSwipeableComponent(props: Props) {
 
     const { token, tokenId, wallet, walletId } = item.item
 
+    const disable = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined
     if (wallet != null) {
       return (
-        <EdgeAnim enter={{ type: 'fadeInRight', distance: 20 * (index + 1) }}>
+        <EdgeAnim disable={disable} enter={{ type: 'fadeInDown', distance: 20 * (index + 1) }}>
           <WalletListSwipeableCurrencyRow navigation={navigation} token={token} tokenId={tokenId} wallet={wallet} />
         </EdgeAnim>
       )
     }
     if (walletId != null) {
       return (
-        <EdgeAnim enter={{ type: 'fadeInRight', distance: 20 * (index + 1) }}>
+        <EdgeAnim disable={disable} enter={{ type: 'fadeInDown', distance: 20 * (index + 1) }}>
           <WalletListSwipeableLoadingRow navigation={navigation} walletId={walletId} />
         </EdgeAnim>
       )