Merge pull request #373 from wavect/OF-531-App-loading-indicator-on-open-of-encounter-tab

OF-531 - Fixed refresh indicator during initial load

Author: wsdt

mobile/components/OEncounterList/OEncounterList.tsx

@@ -14,6 +14,7 @@ import * as Sentry from "@sentry/react-native";
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
 import {
+    ActivityIndicator,
     RefreshControl,
     ScrollView,
     StyleSheet,
@@ -33,7 +34,7 @@ export const OEncounterList = (props: IOEncounterListProps) => {
     const navigation = useNavigation();
     const { state: encounterState, dispatch } = useEncountersContext();
     const { state: userState } = useUserContext();
-    const [refreshing, setRefreshing] = useState(false);
+    const [refreshing, setRefreshing] = useState(true);
 
     const fetchEncounters = useCallback(async () => {
         try {
@@ -143,7 +144,13 @@ export const OEncounterList = (props: IOEncounterListProps) => {
                 styles.emptyListContainer
             }
         >
-            {getEncounterList()}
+            {refreshing && encounterState.encounters.length === 0 ? (
+                <View style={styles.loadingContainer}>
+                    <ActivityIndicator size="large" color={Color.gray} />
+                </View>
+            ) : (
+                getEncounterList()
+            )}
         </ScrollView>
     );
 };
@@ -180,4 +187,9 @@ const styles = StyleSheet.create({
         height: "100%",
         minHeight: 400,
     },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
 });