update

src/components/AnimatedDots.tsx

@@ -1,66 +1,72 @@
-"use client"
+'use client';
 
-import React, { useEffect, useRef, useMemo, useCallback } from "react"
-import { View, Animated, StyleSheet } from "react-native"
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, View } 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 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 animationConfig = useMemo(
+    () => ({
+      duration: 300,
+      useNativeDriver: true,
+    }),
+    [],
+  );
 
-    const createTimingAnimation = useCallback((value: Animated.Value, toValue: number) => {
-        return Animated.timing(value, {
-            toValue,
-            ...animationConfig,
-        });
-    }, [animationConfig]);
+  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]);
+  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();
-        };
+  useEffect(() => {
+    const animateDots = () => {
+      Animated.loop(animationSequence).start();
+    };
 
-        animateDots();
-    }, [animationSequence]);
+    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>
-    )
-}
+  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',
-    },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#28A7E8',
+  },
 });
 
 export default AnimatedDots;