improve page load times on map

xmrnodes/templates/map.html

@@ -74,42 +74,18 @@
 <div id="popup" class="popup" title="Welcome to OpenLayers"></div>
 
 <script>
-  function loadMap() {
-
-    // Marker layer
-    markerLayer = new ol.layer.Vector({
-      source: new ol.source.Vector({
-        features: [],
-        projection: 'EPSG:3857'
-      })
-    });
-
-    // Create the map
-    var map = new ol.Map({
-      target: 'map',
-      layers: [
-        new ol.layer.Tile({
-          source: new ol.source.OSM(),
-          preload: 4
-        }),
-        markerLayer
-      ],
-      view: new ol.View({
-        center: ol.proj.fromLonLat([0, 25]),
-        zoom: 1
-      })
-    });
 
+  function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
 
-    fetch('?fetch=1')
-      .then((response) => response.json())
-      .then((data) => {
-        let total = data.total;
-        for(i=0;i<total+1;i++) {
-          fetch(`?fetch=1&offset=${i}`)
+  async function fetchWithDelay(total, delayMs) {
+    for(let i=0; i < total + 1; i++) {
+      console.log(`Fetching page ${i}`)
+      try {
+        await fetch(`?fetch=1&offset=${i}`)
           .then((res) => res.json())
           .then((d) => {
-              setTimeout(function() {
             for (var url in d.peers) {
               let peer = d.peers[url];
               var feature = new ol.Feature(
@@ -133,10 +109,45 @@
               }));
               markerLayer.getSource().addFeature(feature);
             }
-              }, 400)
           })
+      } catch (err) {
+        console.error(`Error on request ${i}`);
+      }
+      await delay(delayMs);
+    }
   }
+
+  async function loadMap() {
+
+    // Marker layer
+    markerLayer = new ol.layer.Vector({
+      source: new ol.source.Vector({
+        features: [],
+        projection: 'EPSG:3857'
       })
+    });
+
+    // Create the map
+    var map = new ol.Map({
+      target: 'map',
+      layers: [
+        new ol.layer.Tile({
+          source: new ol.source.OSM(),
+          preload: 4
+        }),
+        markerLayer
+      ],
+      view: new ol.View({
+        center: ol.proj.fromLonLat([0, 25]),
+        zoom: 1
+      })
+    });
+
+    
+    const res = await fetch('?fetch=1')
+      .then((res) => res.json())
+    console.log(`Found ${res.total} pages of peers to fetch`)
+    fetchWithDelay(res.total, 1500);
 
     // Setup popup
     var popup = new ol.Overlay({