app: add progress bar to mapscreen loading

src/lib/screens/BaseScreen.js

@@ -2,12 +2,27 @@ import React from 'react'
 import { Loading } from '../components/Loading'
 import { SafeAreaView } from 'react-native'
 import { ErrorMessage } from '../components/ErrorMessage'
+import { LinearProgress } from 'react-native-elements'
+import { Colors } from '../constants/Colors'
 
+/**
+ *
+ * @component
+ * @param props {object}
+ * @param props.loading {boolean}
+ * @param props.style {object=}
+ * @param props.error {Error=}
+ * @param props.data {*=}
+ * @param props.progress {number=}
+ * @param props.loadMessage {string}
+ * @return {JSX.Element}
+ */
 const RenderScreenBase = (props) => {
   if (props.loading) {
     return (
       <SafeAreaView style={props.style}>
         <Loading text={props.loadMessage} />
+        {linearProgress(props.progress)}
       </SafeAreaView>
     )
   }
@@ -34,4 +49,14 @@ const RenderScreenBase = (props) => {
   return (<SafeAreaView style={props.style}>{props.children}</SafeAreaView>)
 }
 
+const linearProgress = progress => {
+  if (typeof progress !== 'number') {
+    return null
+  }
+
+  return (
+    <LinearProgress color={Colors.primary} value={progress} variant='determinate' />
+  )
+}
+
 export const ScreenBase = React.memo(RenderScreenBase)

src/lib/screens/map/MapScreen.js

@@ -20,6 +20,7 @@ import { MapIcons } from '../../contexts/MapIcons'
 
 const log = Log.create('MapScreen')
 const ITEM_HEIGHT = 100
+const counter = 0.75
 
 /**
  * The MapScreen displays available "stages" (levels) of difficulty
@@ -188,7 +189,12 @@ export const MapScreen = props => {
   }
 
   return (
-    <ScreenBase {...mapDocs} loadMessage={t('mapScreen.loadData')} style={styles.container}>
+    <ScreenBase
+      {...mapDocs}
+      loadMessage={t('mapScreen.loadData')}
+      progress={counter}
+      style={styles.container}
+    >
       {renderList()}
     </ScreenBase>
   )