Added wait modals everywhere. Reduce required distance to item

mobile/src/Home/Home.js

@@ -13,7 +13,7 @@ import {
 } from "react-native"
 import MapView, { Marker, Callout } from "react-native-maps"
 import { Icon, Header, Geolocation } from "../ui"
-import { MessageModal } from "../Modal"
+import { MessageModal, WaitModal } from "../Modal"
 import { api } from "../API"
 import { reactAutoBind } from "auto-bind2"
 import { ifIphoneX } from "react-native-iphone-x-helper"
@@ -41,6 +41,8 @@ export class Home extends React.Component {
     super(props)
     reactAutoBind(this)
     this.state = {
+      waitModal: null,
+      messageModal: null,
       sections: [],
       showWorkItems: true,
       haveCameraPermission: false,
@@ -97,7 +99,14 @@ export class Home extends React.Component {
       this.state.haveLocationPermission = true
       this.state.haveCameraPermission = true
     }
+  }
 
+  componentDidMount() {
+    this.loadWorkItems()
+  }
+
+  loadWorkItems() {
+    this.setState({ waitModal: { message: "Loading Work Items..." } })
     api
       .listTeams()
       .then((list) => {
@@ -105,6 +114,8 @@ export class Home extends React.Component {
         return api.listWorkItemActivities()
       })
       .then((list) => {
+        this.setState({ waitModal: null })
+
         list.items.forEach((item) => {
           item.data.forEach((datum) => {
             const team = this.teams.find((team) => team._id === datum.team)
@@ -130,6 +141,7 @@ export class Home extends React.Component {
       })
       .catch((err) => {
         this.setState({
+          waitModal: null,
           messageModal: {
             icon: "hand",
             message: "Unable to get a list of work items, activities and teams",
@@ -246,7 +258,13 @@ export class Home extends React.Component {
   }
 
   handleToggleWorkItemsList() {
-    this.setState({ showWorkItems: !this.state.showWorkItems })
+    const newShowWorkItems = !this.state.showWorkItems
+
+    this.setState({ showWorkItems: newShowWorkItems })
+
+    if (newShowWorkItems) {
+      this.loadWorkItems()
+    }
   }
 
   handleCalloutPress(workItem) {
@@ -287,6 +305,7 @@ export class Home extends React.Component {
       sections,
       showWorkItems,
       messageModal,
+      waitModal,
       haveCameraPermission,
       haveLocationPermission,
     } = this.state
@@ -491,6 +510,10 @@ export class Home extends React.Component {
         {haveLocationPermission && (
           <Geolocation onUpdate={this.handlePositionUpdate} />
         )}
+        <WaitModal
+          open={!!waitModal}
+          message={waitModal ? waitModal.message : ""}
+        />
         <MessageModal
           open={!!messageModal}
           icon={messageModal ? messageModal.icon : ""}