diff --git a/src/components/common/EdgeAnim.tsx b/src/components/common/EdgeAnim.tsx index 70d5ee7abc7..7e432649369 100644 --- 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 { + /** + * 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 {children} + if (disable === 'anim' || (ios && Platform.OS !== 'ios')) { + return {children} + } + + if (disable === 'view') { + return <>{children} } return ( diff --git a/src/components/scenes/CoinRankingScene.tsx b/src/components/scenes/CoinRankingScene.tsx index 1df694c659c..2a80101a6e4 100644 --- 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 ( - + } + + const disable = index >= MAX_LIST_ITEMS_ANIM ? 'view' : undefined if (typeof item === 'string') { return ( - + ) } return ( - + ) diff --git a/src/components/themed/WalletListSwipeable.tsx b/src/components/themed/WalletListSwipeable.tsx index b7a37d0d982..4a0045316db 100644 --- 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 ( - + ) } if (walletId != null) { return ( - + )