loading indicator done

2 files changed, 11 insertions, 2 deletions

diff --git a/src/assets/gifs/loading-animation.gif b/src/assets/gifs/loading-animation.gif
new file mode 100644
index 00000000..6a69b07b
--- /dev/null
+++ b/src/assets/gifs/loading-animation.gif
diff --git a/src/components/common/TaggLoadingIndicator.tsx b/src/components/common/TaggLoadingIndicator.tsx
index cfb99e80..c3c44bf9 100644
--- a/src/components/common/TaggLoadingIndicator.tsx
+++ b/src/components/common/TaggLoadingIndicator.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import {Image, StyleSheet, View} from 'react-native';
 
 type TaggLoadingIndicatorProps = {
   color: string;
@@ -7,7 +7,10 @@ type TaggLoadingIndicatorProps = {
 const TaggLoadingIndicator: React.FC<TaggLoadingIndicatorProps> = ({color}) => {
   return (
     <View style={[styles.container, styles.horizontal]}>
-      <ActivityIndicator size="large" color={color} />
+      <Image
+        source={require('../../assets/gifs/loading-animation.gif')}
+        style={styles.icon}
+      />
     </View>
   );
 };
@@ -22,6 +25,12 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
     padding: 10,
   },
+  icon: {
+    alignSelf: 'center',
+    justifyContent: 'center',
+    width: '30%',
+    height: '5%',
+  },
 });
 
 export default TaggLoadingIndicator;