Commit b65c1ebc authored by Milan DiGiuseppe's avatar Milan DiGiuseppe
Browse files

map loading spinner + overlay

parent 9f7e5eb0
......@@ -1838,6 +1838,15 @@
"@types/react": "*"
}
},
"@types/react-native-indicators": {
"version": "0.16.0",
"resolved": "https://registry.npmjs.org/@types/react-native-indicators/-/react-native-indicators-0.16.0.tgz",
"integrity": "sha512-YfrRxz+fk5CMwpKCF+m7Y4I681tWSf2tzMj7UBk8WvtsksudsoQvnnIgHcg+fot0Dxig61VpSsqRR+rnRUKNZA==",
"requires": {
"@types/react": "*",
"@types/react-native": "*"
}
},
"@types/react-native-vector-icons": {
"version": "6.4.5",
"resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.5.tgz",
......@@ -7327,6 +7336,14 @@
}
}
},
"react-native-indicators": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-native-indicators/-/react-native-indicators-0.17.0.tgz",
"integrity": "sha512-s23em477GHGxWeGczWrixScAZD6tQU4mx1fttlrwhEGKOxhBgp55Kh3RoD9Wj4yna4e5W35xQNoPqoJAT6QW5A==",
"requires": {
"prop-types": "^15.5.10"
}
},
"react-native-iphone-x-helper": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
......
import React, {
useEffect, useState, useRef, createContext, useContext,
useEffect, useState, useRef, createContext, useContext, useCallback,
} from 'react';
import MapView, { LatLng } from 'react-native-maps';
import { useDispatch, useSelector } from 'react-redux';
import { watchPositionAsync } from 'expo-location';
import { StyleSheet, ViewStyle } from 'react-native';
import {
StyleSheet, ViewStyle, View,
} from 'react-native';
import { WaveIndicator } from 'react-native-indicators';
import mapStyleDay from '../../map-styles/MapStyleDay.json';
import { geoSearch } from '../store/caches/CachesActions';
import { distanceBetweenCoordinates } from '../utils/Geography';
import { getIdToken } from '../store/auth/AuthSelectors';
import theme from '../theme';
const styles = StyleSheet.create({
hideGoogleLogo: {
......@@ -19,6 +23,12 @@ const styles = StyleSheet.create({
...StyleSheet.absoluteFillObject,
bottom: -100,
},
loadingOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: theme.colors.avocado,
justifyContent: 'center',
alignItems: 'center',
},
});
......@@ -135,31 +145,59 @@ const GeoMap = React.forwardRef<MapView, GeoMapProps>(({
}, { duration: 100 });
}, [location]);
return (
<MapView
ref={ref ?? mapRef}
provider={'google'}
style={style ?? styles.hideGoogleLogo}
customMapStyle={mapStyleDay}
showsBuildings={false}
showsIndoors={false}
showsPointsOfInterest={false}
showsCompass
initialCamera={{
center: location,
heading: 0,
pitch: 90,
const [isMapLoading, setMapLoading] = useState<boolean>(true);
const onMapReady = useCallback(() => {
setTimeout(() => setMapLoading(false), 1500);
}, [setMapLoading]);
// Zoom in effect on first load
useEffect(() => {
if (!isMapLoading) {
mapRef.current?.animateCamera({
zoom: 18,
altitude: 0, // not used for Google Maps
}}
loadingEnabled // TODO: test
rotateEnabled={rotationEnabled}
pitchEnabled={false}
zoomEnabled={false}
scrollEnabled={false}
>
{children}
</MapView>
pitch: 90,
}, { duration: 500 });
}
}, [isMapLoading]);
return (
<View style={StyleSheet.absoluteFill}>
<MapView
ref={ref ?? mapRef}
onMapReady={onMapReady}
provider={'google'}
style={style ?? styles.hideGoogleLogo}
customMapStyle={mapStyleDay}
showsBuildings={false}
showsIndoors={false}
showsPointsOfInterest={false}
showsCompass
initialCamera={{
center: location,
heading: 0,
pitch: 0,
zoom: 14,
altitude: 0, // not used for Google Maps
}}
rotateEnabled={rotationEnabled}
pitchEnabled={false}
zoomEnabled={false}
scrollEnabled={false}
>
{children}
</MapView>
{isMapLoading && (
<View style={styles.loadingOverlay}>
<WaveIndicator
color={theme.colors.white}
count={2}
size={80}
waveMode={'outline'}
/>
</View>
)}
</View>
);
});
......
......@@ -2,6 +2,7 @@ const COLOR_NAMES = [
'white',
'blue',
'green',
'avocado',
'darkgray',
'lightgray',
'mediumgray',
......@@ -18,6 +19,7 @@ export const COLOR_MAP: ColorMap = {
white: '#fff',
blue: '#2089dc',
green: '#1b822e',
avocado: '#abce83',
darkgray: '#999',
mediumgray: '#aaa',
lightgray: '#eee',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment