Adding a simple "loading" modal to mapfeedscreen markers

src/app/components/LoadingMarkersModal.js

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from "react-native";
+
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+
+export default function LoadingMarkersModal({ show }) {
+  return (
+    <Modal
+      transparent={true}
+      animationType="slide"
+      visible={show}
+      supportedOrientations={["portrait"]}
+    >
+      <View
+        style={{
+          justifyContent: "center",
+          alignSelf: "center",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <View style={styles.container}>
+          <MaterialCommunityIcons
+            name="sync"
+            size={48}
+            color={colors.primary}
+            style={{ alignSelf: "center", marginBottom: 12 }}
+          />
+          <Text style={styles.text}>
+            Aguarde um momento enquanto os dados são carregados
+          </Text>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "80%",
+    height: 170,
+    justifyContent: "center",
+    alignSelf: "center",
+    backgroundColor: colors.lightestGray,
+    borderColor: colors.primary,
+    borderWidth: 2,
+    borderRadius: 12,
+    padding: 12,
+  },
+  text: {
+    fontSize: dimensions.text.secondary,
+    textAlign: "center",
+    color: colors.primary,
+    fontWeight: "bold",
+  },
+});

src/app/screens/MapFeedScreen.js

@@ -1,22 +1,15 @@
-import React, { useEffect, useContext, useState } from "react";
+import React, { useState } from "react";
 import { StyleSheet, View } from "react-native";
 import OpenStreetMap from "../components/map/OpenStreetMap";
 import attachFocusToQuery from "../hooks/useFocus";
-import { MapMarkerList } from "../components/MapMarkerList";
-import formsApi from "../api/getforms";
-import useMarkers from "../hooks/selectFromDB";
 import HeaderBarMenu from "../components/HeaderBarMenu";
-import { getFormsAnswers } from "../hooks/useFormsAswers";
-import SocketClient from "../api/Websockets/SocketClient";
-import { useFiltering } from "../hooks/useFiltering";
 import useSocketMarkers from "../hooks/useSocketMarkers";
+import LoadingMarkersModal from "../components/LoadingMarkersModal";
 
 export default function MapFeedScreen(props) {
   HeaderBarMenu(props.navigation);
 
   const focusChanged = attachFocusToQuery();
-  //const [error, setError] = useState(false);
- //const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
  
   const [dataOptionsToShow, setDataOptionsToShow] = useState({
     oficial: {
@@ -33,25 +26,11 @@ export default function MapFeedScreen(props) {
   });  
 
   const markers = useSocketMarkers();
- //  console.log(markers);
-
-  // useEffect(() => {
-  //   loadForms();
-  // }, []);
-
-  // const loadForms = async () => {
-  //   const response = await formsApi.getForms();
-  //   console.log(response);
-  //   if (!response.ok) {
-  //     console.log("resposta não ok!");
-  //     return setError(true);
-  //   }
-  //   setError(false);
-  // }
-
 
   return (
     <View style={styles.container}>
+      <LoadingMarkersModal
+        show={markers.markers.size <= 0}/>
       <OpenStreetMap
         markers={markers}
         centerUserLocation={true}
@@ -67,33 +46,4 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#FFF",
   },
-  callback: {
-    position: "absolute",
-    bottom: 30,
-    alignSelf: "center",
-    alignItems: "center",
-    backgroundColor: "gray",
-    width: "80%",
-    padding: 10,
-  },
-  btn: {
-    width: "80%",
-    position: "absolute",
-    top: 30,
-    flexDirection: "row",
-    justifyContent: "space-evenly",
-    alignItems: "center",
-    alignSelf: "center",
-  },
-  btns: {
-    backgroundColor: "dodgerblue",
-    borderRadius: 10,
-    width: 100,
-    padding: 10,
-    margin: 4,
-    alignItems: "center",
-  },
-  txt: {
-    color: "white",
-  },
 });