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
|
import type { View } from "react-native";
import { useEffect, useRef } from "react";
import { Animated } from "react-native";
import { cn } from "@/lib/utils";
function Skeleton({
className,
...props
}: { className?: string } & React.ComponentPropsWithoutRef<typeof View>) {
const fadeAnim = useRef(new Animated.Value(0.5)).current;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(fadeAnim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(fadeAnim, {
toValue: 0.5,
duration: 1000,
useNativeDriver: true,
}),
]),
).start();
}, [fadeAnim]);
return (
<Animated.View
className={cn("rounded-md bg-muted", className)}
style={[{ opacity: fadeAnim }]}
{...props}
/>
);
}
export { Skeleton };
|
