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 spinValue = useRef(new Animated.Value(0)).current;
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"],
+  });
+
+  useEffect(() => {
+    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}></View>
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="black" style={styles.loader} />
+    </View>
     );
-}
+};
-
 
 export default LoadingSymbol;