Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 4x 2x 2x 2x 2x 2x 12x 4x | import React, { useEffect, useRef } from 'react';
import { Animated, View } from 'react-native';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { SCREEN_WIDTH } from '@/utils/dimensions';
export const RequestSkeleton = () => {
const styles = useStyles();
const shimmerAnim = useRef(new Animated.Value(-SCREEN_WIDTH)).current;
useEffect(() => {
Animated.loop(
Animated.timing(shimmerAnim, {
toValue: SCREEN_WIDTH,
duration: 1500,
useNativeDriver: true,
}),
).start();
}, [shimmerAnim]);
return (
<View style={styles.container}>
{[...Array(6)].map((_, index) => (
<View key={index} style={styles.item}>
<Animated.View
style={[
styles.shimmer,
{
transform: [{ translateX: shimmerAnim }],
},
]}
/>
</View>
))}
</View>
);
};
const useStyles = makeStyles(theme => ({
container: {
gap: theme.metrics.spacing[2],
},
item: {
flexDirection: 'row',
backgroundColor: theme.colors.background.secondary,
height: theme.metrics.spacing[15],
borderRadius: theme.metrics.borderRadius[2],
overflow: 'hidden',
},
shimmer: {
position: 'absolute',
left: theme.metrics.spacing[0],
top: theme.metrics.spacing[0],
height: theme.metrics.sizing.full,
width: '30%',
backgroundColor: theme.colors.text.white,
opacity: theme.metrics.opacity[30],
},
}));
|