Merge pull request #134 from OCA-UFCG/fix/decrease-request-time

enhancing request time when loading maps

Author: LazaroQueiroz

src/components/MapTiff/MapTiff.tsx

@@ -113,11 +113,9 @@ const MapTiff = ({
     }
   }, [isReduced, mapContainer]);
 
-  const loadMapLayer = useCallback(
+  const loadSource = useCallback(
     async (name: string, year: string) => {
-      setLoading(true);
       if (!map?.getSource(name + year) && mapsData.length > 0) {
-        // Filter the contentful map data by name
         const mapData = mapsData.find(
           (data) => data.fields.id === name,
         )?.fields;
@@ -134,6 +132,7 @@ const MapTiff = ({
             body,
           },
         );
+
         if (response.status !== 200) {
           setLoading(false);
 
@@ -145,14 +144,34 @@ const MapTiff = ({
           map?.addSource(name + year, {
             type: "raster",
             tiles: [url],
-            tileSize: 256,
+            tileSize: isReduced ? 128 : 256,
           });
         }
       }
+    },
+    [map, mapsData, setLoading, isReduced],
+  );
+
+  const cacheMapData = useCallback(async () => {
+    mapsData.forEach(async (data) => {
+      const id = data.fields.id;
+      const imageData = data.fields.imageData;
+      if (!isReduced) {
+        Object.keys(imageData).forEach(async (year) => {
+          if (map && !map?.getSource(data + year)) loadSource(id, year);
+        });
+      } else {
+        const dates = Object.keys(imageData);
+        loadSource(id, dates[dates.length - 1]);
+      }
+    });
+  }, [mapsData, loadSource, isReduced, map]);
+
+  const loadMapLayer = useCallback(
+    async (name: string, year: string) => {
+      setLoading(true);
+      await loadSource(name, year);
 
-      // This code adds a raster layer on top of the first "symbol" layer in the map's style.
-      // It checks if the map and its layers exist, finds the first layer of type "symbol",
-      // and inserts the raster layer right above it.
       const symbolLayer = map
         ?.getStyle()
         ?.layers?.find((layer) => layer.type === "symbol");
@@ -167,9 +186,12 @@ const MapTiff = ({
           symbolLayer.id,
         );
       }
+
+      cacheMapData();
+
       setLoading(false);
     },
-    [map, mapsData, setLoading],
+    [map, setLoading, loadSource, cacheMapData],
   );
 
   const addPopupEffect = useCallback(