Initial commit

src/components/AnimatedDots.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import React, { useEffect, useRef, useMemo, useCallback } from "react"
+import { View, Animated, StyleSheet } from "react-native"
+
+const AnimatedDots = () => {
+    const dot1 = useRef(new Animated.Value(0)).current
+    const dot2 = useRef(new Animated.Value(0)).current
+    const dot3 = useRef(new Animated.Value(0)).current
+
+    const animationConfig = useMemo(() => ({
+        duration: 300,
+        useNativeDriver: true,
+    }), []);
+
+    const createTimingAnimation = useCallback((value: Animated.Value, toValue: number) => {
+        return Animated.timing(value, {
+            toValue,
+            ...animationConfig,
+        });
+    }, [animationConfig]);
+
+    const animationSequence = useMemo(() => {
+        return Animated.sequence([
+            createTimingAnimation(dot1, 1),
+            createTimingAnimation(dot2, 1),
+            createTimingAnimation(dot3, 1),
+            createTimingAnimation(dot1, 0),
+            createTimingAnimation(dot2, 0),
+            createTimingAnimation(dot3, 0),
+        ]);
+    }, [dot1, dot2, dot3, createTimingAnimation]);
+
+    useEffect(() => {
+        const animateDots = () => {
+            Animated.loop(animationSequence).start();
+        };
+
+        animateDots();
+    }, [animationSequence]);
+
+    return (
+        <View style={styles.container}>
+            <Animated.View style={[styles.dot, { opacity: dot1 }]} />
+            <Animated.View style={[styles.dot, { opacity: dot2 }]} />
+            <Animated.View style={[styles.dot, { opacity: dot3 }]} />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 8,
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: '#28A7E8',
+    },
+});
+
+export default AnimatedDots;