added refresh modal to map

src/components/Map/MainMapComponent/OutdoorMap.tsx

@@ -11,7 +11,7 @@ import { booleanPointInPolygon, circle } from '@turf/turf';
 import * as Notifications from 'expo-notifications';
 import { observer } from "mobx-react";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import { Alert, AppState, Image, Keyboard, Platform, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
+import { ActivityIndicator, Alert, AppState, Image, Keyboard, Modal, Platform, TouchableOpacity, TouchableWithoutFeedback, View, Text } from "react-native";
 import { ScrollView, State } from "react-native-gesture-handler";
 import MapView, { LatLng, Marker, Polygon, Region } from "react-native-maps";
 import { Chip } from "react-native-paper";
@@ -90,9 +90,12 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
     }, [props.route])
 
     useEffect(() => {
-        mapState.setRefreshKey(Math.floor(Math.random() * 100))
-        console.log(currentRegion.current)
-        mapState.mapRef.current.animateToRegion(currentRegion.current)
+        if (navIndex == 0) {
+            mapState.setLoading(true)
+            setTimeout(() => {
+                mapState.setLoading(false)
+            }, 10);
+        }
     }, [navIndex])
 
     /**
@@ -283,6 +286,14 @@ const OutdoorMap: React.FC<OutdoorMapProps> = (props) => {
         <TouchableWithoutFeedback>
             <>
             {/*Main map component*/}
+            <Modal transparent={true} animationType="fade" visible={mapState.loading}>
+                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.3)'}}>
+                    <View style={{width: '60%', height: '30%', backgroundColor: colors.red, justifyContent: 'center', alignItems: 'center', borderRadius: 20}}>
+                        <ActivityIndicator size="large" color="white" style={{marginBottom: 20}}/>
+                        <Text style={{fontSize: 15, color: 'white'}}>Refreshing</Text>
+                    </View>
+                </View>
+            </Modal>
             <MapView 
                 key={mapState.refreshKey}
                 toolbarEnabled={false}

src/components/Map/MainMapComponent/useMapState.ts

@@ -68,6 +68,7 @@ export const useMapState = () => {
 }
 
 export const useOutdoorMapState = () => {
+    const [loading, setLoading] = useState<boolean>(false);
     /**
      * Used to force refreshes
      */
@@ -115,6 +116,7 @@ export const useOutdoorMapState = () => {
     const mapRef = useRef<MapView>();
 
     return {
+        loading, setLoading,
         refreshKey, setRefreshKey,
         nearbyLmPanelVisible, toggleNearbyLmPanel,
         followUser, toggleFollowUser,

src/utils/RequestUtils.ts

@@ -28,6 +28,6 @@ import Config from 'react-native-config'
 // export const API_URL = 'https://staging.clicknpush.ca'
 
 // export const API_URL = 'http://192.168.3.162:8000'
-export const API_URL = 'http://192.168.0.22:8000'
+export const API_URL = 'http://192.168.3.102:8000'
 
 // export const API_URL = Config.API_URL