circle

components/common/loadingSymbol.tsx

@@ -1,23 +1,49 @@
-import { StyleSheet, View } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { StyleSheet, View, Animated, Easing, ActivityIndicator } from "react-native";
 
 const LoadingSymbol = () => {
+  const color = ["blue", "red", "purple", "green", "yellow", "orange"];
+  const random = Math.floor(Math.random() * color.length);
 
-    const color = ["blue", "red", "purple", "green", "yellow", "orange"];
+  const spinValue = useRef(new Animated.Value(0)).current;
-    const random = Math.floor(Math.random() * color.length);
 
-    const styles = StyleSheet.create({
+  const spin = spinValue.interpolate({
-        container: {
+    inputRange: [0, 1],
-            backgroundColor: color[random],
+    outputRange: ["0deg", "360deg"],
-            width: "100%",
+  });
-            height: "100%",
-            position: "absolute",
-        }
-    });
 
-    return (
+  useEffect(() => {
-    <View style={styles.container}></View>
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, [spinValue]);
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: color[random],
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    loader: {
+      width: 100,
+      height: 100,
+      transform: [{ rotate: spin }],
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="black" style={styles.loader} />
+    </View>
     );
-}
+};
-
 
 export default LoadingSymbol;