location spinner

src/screens/InAppScreens/MapScreen/index.tsx

@@ -7,7 +7,8 @@ import {
   TouchableOpacity,
   View,
   Image,
-  StatusBar
+  StatusBar,
+  ActivityIndicator
 } from 'react-native';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 
@@ -319,6 +320,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   const [isEditSlowModalVisible, setIsEditSlowModalVisible] = useState<boolean>(false);
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
   const [isFilterVisible, setIsFilterVisible] = useState(false);
+  const [isLocationLoading, setIsLocationLoading] = useState(false);
 
   const [modalState, setModalState] = useState({
     selectedFirstYear: 2021,
@@ -800,14 +802,19 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   };
 
   const handleGetLocation = async () => {
-    let { status, canAskAgain } = await Location.getForegroundPermissionsAsync();
+    setIsLocationLoading(true);
+    try {
+      let { status, canAskAgain } = await Location.getForegroundPermissionsAsync();
 
-    if (status === 'granted') {
-      getLocation();
-    } else if (!canAskAgain) {
-      setOpenSettingsVisible(true);
-    } else {
-      setAskLocationVisible(true);
+      if (status === 'granted') {
+        await getLocation();
+      } else if (!canAskAgain) {
+        setOpenSettingsVisible(true);
+      } else {
+        setAskLocationVisible(true);
+      }
+    } finally {
+      setIsLocationLoading(false);
     }
   };
 
@@ -817,6 +824,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     });
     setLocation(currentLocation.coords);
 
+    if (currentLocation.coords) {
+      cameraRef.current?.flyTo(
+        [currentLocation.coords.longitude, currentLocation.coords.latitude],
+        1000
+      );
+    }
+
     if (showNomads && token) {
       updateLocation({
         token,
@@ -826,12 +840,6 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
       refetchUsersLocation();
     }
-    if (currentLocation.coords) {
-      cameraRef.current?.flyTo(
-        [currentLocation.coords.longitude, currentLocation.coords.latitude],
-        1000
-      );
-    }
 
     handleClosePopup();
   };
@@ -1329,7 +1337,11 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             onPress={handleGetLocation}
             style={[styles.cornerButton, styles.topRightButton, styles.bottomButton]}
           >
-            <LocationIcon />
+            {isLocationLoading ? (
+              <ActivityIndicator size="small" color={Colors.DARK_BLUE} />
+            ) : (
+              <LocationIcon />
+            )}
           </TouchableOpacity>
 
           <RegionPopup
@@ -1452,7 +1464,11 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             onPress={handleGetLocation}
             style={[styles.cornerButton, styles.bottomButton, styles.bottomRightButton]}
           >
-            <LocationIcon />
+            {isLocationLoading ? (
+              <ActivityIndicator size="small" color={Colors.DARK_BLUE} />
+            ) : (
+              <LocationIcon />
+            )}
           </TouchableOpacity>
         </>
       )}

src/screens/InAppScreens/ProfileScreen/UsersMap/index.tsx

@@ -5,7 +5,8 @@ import {
   Linking,
   TextInput,
   Dimensions,
-  StatusBar
+  StatusBar,
+  ActivityIndicator
 } from 'react-native';
 import React, { FC, useEffect, useRef, useState } from 'react';
 import * as Location from 'expo-location';
@@ -168,6 +169,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
   const [search, setSearch] = useState('');
   const [searchInput, setSearchInput] = useState('');
   const { data: searchData } = useGetUniversalSearch(search, search.length > 0);
+  const [isLocationLoading, setIsLocationLoading] = useState(false);
 
   const { data: visitedRegionIds } = usePostGetVisitedRegionsIdsQuery(
     token,
@@ -208,14 +210,19 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
   }, [visitedDareIds]);
 
   const handleGetLocation = async () => {
-    let { status, canAskAgain } = await Location.getForegroundPermissionsAsync();
-
-    if (status === 'granted') {
-      getLocation();
-    } else if (!canAskAgain) {
-      setOpenSettingsVisible(true);
-    } else {
-      setAskLocationVisible(true);
+    setIsLocationLoading(true);
+    try {
+      let { status, canAskAgain } = await Location.getForegroundPermissionsAsync();
+
+      if (status === 'granted') {
+        await getLocation();
+      } else if (!canAskAgain) {
+        setOpenSettingsVisible(true);
+      } else {
+        setAskLocationVisible(true);
+      }
+    } finally {
+      setIsLocationLoading(false);
     }
   };
 
@@ -441,7 +448,11 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
         onPress={handleGetLocation}
         style={[styles.cornerButton, styles.bottomButton, styles.bottomRightButton]}
       >
-        <LocationIcon />
+        {isLocationLoading ? (
+          <ActivityIndicator size="small" color={Colors.DARK_BLUE} />
+        ) : (
+          <LocationIcon />
+        )}
       </TouchableOpacity>
       <Animated.View
         style={[