update

src/components/TypingLoader.js

@@ -0,0 +1,37 @@
+import { View } from "react-native";
+import { useState } from "react";
+import { Motion } from "@legendapp/motion";
+
+import { Palette, Style } from "../styles";
+
+export default () => {
+  const [animatedDotIndex, setAnimatedDotIndex] = useState(0);
+
+  setTimeout(() => {
+    setAnimatedDotIndex((animatedDotIndex + 1) % 3);
+  }, 500);
+
+  return (
+    <View
+      style={[
+        Style.containerSpaceBetween,
+        { width: 60, padding: 10, paddingVertical: 5 },
+      ]}
+    >
+      {[1, 2, 3].map((item) => (
+        <Motion.View
+          key={item}
+          animate={{
+            opacity: animatedDotIndex === item - 1 ? 1 : 0.2,
+          }}
+          style={{
+            backgroundColor: Palette.white,
+            width: 8,
+            height: 8,
+            borderRadius: 50,
+          }}
+        />
+      ))}
+    </View>
+  );
+};