Remove loading-placeholder animation; according to some issues, animated linear-gradients may cause crashes
parent
662a4ef23b
commit
5d7c4ddd90
|
@ -1,13 +1,5 @@
|
||||||
import React, {useEffect, useMemo} from 'react'
|
import React from 'react'
|
||||||
import {
|
import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
|
||||||
Animated,
|
|
||||||
StyleSheet,
|
|
||||||
StyleProp,
|
|
||||||
useWindowDimensions,
|
|
||||||
View,
|
|
||||||
ViewStyle,
|
|
||||||
} from 'react-native'
|
|
||||||
import LinearGradient from 'react-native-linear-gradient'
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
import {UpIcon} from '../../lib/icons'
|
import {UpIcon} from '../../lib/icons'
|
||||||
import {s, colors} from '../../lib/styles'
|
import {s, colors} from '../../lib/styles'
|
||||||
|
@ -21,31 +13,6 @@ export function LoadingPlaceholder({
|
||||||
height: string | number
|
height: string | number
|
||||||
style?: StyleProp<ViewStyle>
|
style?: StyleProp<ViewStyle>
|
||||||
}) {
|
}) {
|
||||||
const dim = useWindowDimensions()
|
|
||||||
const elWidth = typeof width === 'string' ? dim.width : width
|
|
||||||
const offset = useMemo(() => new Animated.Value(elWidth * -1), [])
|
|
||||||
useEffect(() => {
|
|
||||||
const anim = Animated.loop(
|
|
||||||
Animated.sequence([
|
|
||||||
Animated.timing(offset, {
|
|
||||||
toValue: elWidth,
|
|
||||||
duration: 1e3,
|
|
||||||
useNativeDriver: true,
|
|
||||||
isInteraction: false,
|
|
||||||
}),
|
|
||||||
Animated.timing(offset, {
|
|
||||||
toValue: elWidth * -1,
|
|
||||||
duration: 0,
|
|
||||||
delay: 500,
|
|
||||||
useNativeDriver: true,
|
|
||||||
isInteraction: false,
|
|
||||||
}),
|
|
||||||
]),
|
|
||||||
)
|
|
||||||
anim.start()
|
|
||||||
return () => anim.stop()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
|
@ -58,19 +25,13 @@ export function LoadingPlaceholder({
|
||||||
},
|
},
|
||||||
style,
|
style,
|
||||||
]}>
|
]}>
|
||||||
<Animated.View
|
<View
|
||||||
style={{
|
style={{
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
transform: [{translateX: offset}],
|
backgroundColor: '#e7e9ea',
|
||||||
}}>
|
}}
|
||||||
<LinearGradient
|
/>
|
||||||
colors={['#e7e9ea', '#e2e2e2', '#e7e9ea']}
|
|
||||||
start={{x: 0, y: 0}}
|
|
||||||
end={{x: 1, y: 0}}
|
|
||||||
style={{width: '100%', height: '100%'}}
|
|
||||||
/>
|
|
||||||
</Animated.View>
|
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue