feat: add loading indicator, refactor UserList

src/components/UserList/UserList.tsx

@@ -6,6 +6,7 @@ import React from "react";
 import Spacer from "../../components/Spacer/Spacer";
 import { listUsers } from "../../types/listUsers";
 import { IUser } from "../../types/firestore/User";
+import { useCategory } from "../../hooks/reduxHooks";
 
 type props = {
   list: IUser[];
@@ -19,6 +20,7 @@ const UserList = ({
   categoryMembers,
   setCategoryMembers,
 }: props) => {
+  const category = useCategory();
   return (
     <ScrollView>
       <SafeAreaView style={styles.container}>
@@ -36,7 +38,9 @@ const UserList = ({
               <View>
                 <UserListItem
                   name={item.firstName + " " + item.lastName}
-                  category={item.businessType}
+                  category={
+                    category.find((x) => x.id === item.businessType).name
+                  }
                   uri={item.pic}
                   chosen={
                     fromScreen === "CategoryUpdate" ? chosenUser() : false

src/screens/ecosystem/EcosystemDetailScreen.tsx

 import * as React from "react";
-import { StyleSheet, Image, Alert } from "react-native";
+import { StyleSheet, Image, Alert, ActivityIndicator } from "react-native";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import SmallButton from "../../components/button/SmallButton";
@@ -183,6 +183,11 @@ const EcosystemDetailScreen = ({
             );
           }
         })()}
+        <ActivityIndicator
+          size={"large"}
+          animating={!isFetched}
+          color="#000000"
+        />
       </View>
     </View>
   );

src/screens/ecosystem/UserListScreen.tsx

 import * as React from "react";
 import { useState, useEffect } from "react";
-import { StyleSheet } from "react-native";
+import { ActivityIndicator, StyleSheet } from "react-native";
 import { View } from "../../components/Themed";
 import UserList from "../../components/UserList/UserList";
 import Colors from "../../constants/Colors";
@@ -24,29 +24,33 @@ const UserListScreen = ({
   const nav = useNavigation();
 
   const [listData, setListData] = useState([]);
+  const [isFetched, setIsFetched] = useState(false);
 
   const [categoryMembers, setCategoryMember] = useState<listUsers>(
     route.params.categoryMembers
   );
 
-  useEffect(() => {
+  const fetchUserListData = async () => {
     if (route.params.fromScreen === "EcosystemDetail") {
-      (async () => {
-        setListData(
-          await fetchUsersByEcosystemIdAndType(
-            route.params.id,
-            route.params.headerTitle
-          )
-        );
-      })();
+      setListData(
+        await fetchUsersByEcosystemIdAndType(
+          route.params.id,
+          route.params.headerTitle
+        )
+      );
     } else if (
       route.params.fromScreen === "CreateEcosystem" ||
       route.params.fromScreen === "CategoryUpdate"
     ) {
-      (async () => {
-        setListData(await fetchUsersByCategory(route.params.id));
-      })();
+      setListData(await fetchUsersByCategory(route.params.id));
     }
+    return;
+  };
+
+  useEffect(() => {
+    fetchUserListData().then(() => {
+      setIsFetched(true);
+    });
   }, [route.params?.fromScreen, route.params?.id]);
 
   return (
@@ -57,6 +61,11 @@ const UserListScreen = ({
         setCategoryMembers={setCategoryMember}
         fromScreen={route.params.fromScreen}
       />
+      <ActivityIndicator
+        size={"large"}
+        animating={!isFetched}
+        color="#000000"
+      />
       {(route.params?.fromScreen === "CreateEcosystem" ||
         route.params?.fromScreen === "CategoryUpdate") && (
         <View>