added: display loading indicator on task list/map

coopcycle · Aug 6, 2024 · af13500 · af13500
1 parent 9dd70e4
commit af13500
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 11 deletions.
diff --git a/src/navigation/courier/TaskListPage.js b/src/navigation/courier/TaskListPage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import DateSelectHeader from '../../components/DateSelectHeader';
@@ -78,7 +78,16 @@ export default function TaskListPage({ navigation, route }) {
           }
         />
       )}
-      {tasks.length === 0 && <TapToRefresh onPress={() => refetch()} />}
+      {tasks.length === 0 && (
+        <>
+          <ActivityIndicator
+            style={{ paddingVertical: 8 }}
+            animating={isFetching}
+            size="large"
+          />
+          <TapToRefresh onPress={() => refetch()} />
+        </>
+      )}
     </View>
   );
 }
diff --git a/src/navigation/courier/TasksPage.js b/src/navigation/courier/TasksPage.js
@@ -1,7 +1,13 @@
 import { activateKeepAwakeAsync, deactivateKeepAwake } from 'expo-keep-awake';
 import React, { Component, useMemo } from 'react';
 import { withTranslation } from 'react-i18next';
-import { InteractionManager, Platform, StyleSheet, View } from 'react-native';
+import {
+  ActivityIndicator,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
 import RNPinScreen from 'react-native-pin-screen';
 import { connect, useSelector } from 'react-redux';
 
@@ -25,6 +31,19 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  activityContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    display: 'flex',
+    alignItems: 'center',
+    margin: 8,
+  },
+  activityIndicator: {
+    padding: 8,
+    backgroundColor: 'white',
+    borderRadius: 8,
+  },
 });
 
 function TaskMapPage({ navigation, route }) {
@@ -35,20 +54,31 @@ function TaskMapPage({ navigation, route }) {
     return latlng.split(',').map(parseFloat);
   }, [latlng]);
 
-  useGetMyTasksQuery(selectedDate, {
+  const { isFetching } = useGetMyTasksQuery(selectedDate, {
     refetchOnFocus: true,
   });
 
   return (
     <View style={styles.container}>
       <DateSelectHeader navigate={navigation.navigate} />
-      <TasksMapView
-        mapCenter={mapCenter}
-        tasks={tasks}
-        onMarkerCalloutPress={task =>
-          navigateToTask(navigation, route, task, tasks)
-        }
-      />
+      <View style={{ flex: 1 }}>
+        <TasksMapView
+          mapCenter={mapCenter}
+          tasks={tasks}
+          onMarkerCalloutPress={task =>
+            navigateToTask(navigation, route, task, tasks)
+          }
+        />
+        {isFetching ? (
+          <View style={styles.activityContainer}>
+            <ActivityIndicator
+              style={styles.activityIndicator}
+              animating={true}
+              size="large"
+            />
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 }