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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 9x 3x 3x 3x 3x 3x 3x 3x 3x 9x | import React, { useEffect, useRef } from 'react';
import { Animated, Easing, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { HeaderRequest } from '@repo/ui/components/HeaderRequest';
import { ScreenLayout } from '@repo/ui/components/ScreenLayout';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { useTheme } from '@repo/ui/themes/ThemeContext';
export const FallbackLoadRemote = () => {
const { theme } = useTheme();
const styles = useStyles();
const navigation = useNavigation();
const shimmer = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(
Animated.timing(shimmer, {
toValue: 1,
duration: 900,
easing: Easing.linear,
useNativeDriver: true,
}),
).start();
}, [shimmer]);
const opacity = shimmer.interpolate({
inputRange: [0, 1],
outputRange: [theme.metrics.opacity[40], theme.metrics.opacity[100]],
});
return (
<ScreenLayout>
<HeaderRequest title="" onBack={navigation.goBack} />
<View style={styles.container}>
<View style={styles.content}>
<View style={styles.label} />
<Animated.View style={[styles.input, { opacity }]} />
<View style={styles.label} />
<Animated.View style={[styles.input, { opacity }]} />
<Animated.View style={[styles.input, { opacity }]} />
<View style={styles.label} />
<Animated.View style={[styles.input, { opacity }]} />
<Animated.View style={[styles.input, { opacity }]} />
<View style={styles.label} />
<Animated.View style={[styles.textarea, { opacity }]} />
</View>
<Animated.View style={[styles.submitButton, { opacity }]} />
</View>
</ScreenLayout>
);
};
const useStyles = makeStyles(theme => ({
container: {
flex: 1,
},
content: {
padding: theme.metrics.spacing[4],
gap: theme.metrics.spacing[4],
},
label: {
width: theme.metrics.spacing[37.5],
height: theme.metrics.spacing[4.5],
backgroundColor: theme.colors.skeleton.default,
borderRadius: theme.metrics.borderRadius[1],
marginTop: theme.metrics.spacing[2],
},
input: {
height: theme.metrics.spacing[12],
backgroundColor: theme.colors.skeleton.default,
borderRadius: theme.metrics.borderRadius[2],
},
textarea: {
height: theme.metrics.spacing[20],
backgroundColor: theme.colors.skeleton.default,
borderRadius: theme.metrics.borderRadius[2],
},
submitButton: {
height: theme.metrics.spacing[12],
backgroundColor: theme.colors.skeleton.active,
borderRadius: theme.metrics.borderRadius[2],
marginHorizontal: theme.metrics.spacing[4],
marginBottom: theme.metrics.spacing[4],
marginTop: 'auto',
},
}));
|