more improvements to map load performance

xmrnodes/routes/meta.py

@@ -69,7 +69,7 @@ def map():
     if fetch:
         _peers = {}
         next = None
-        limit = 400
+        limit = 500
         rgb = "238,111,45"
         offset = request.args.get("offset", 0)
         offset = int(offset)

xmrnodes/templates/map.html

@@ -36,10 +36,10 @@
           padding: 2em;
         }
      </style>
-     <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
+     <script defer src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
-     <script src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
+     <script defer src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
-     <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
+     <script defer src="//code.jquery.com/jquery-3.5.1.min.js"></script>
-     <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
+     <script defer src="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
      <title>XMR Nodes</title>
  </head>
 
@@ -66,22 +66,17 @@
   <br>
   <a href="/">Go home</a>
 </div>
-<div id="map" class="map">
 <div id="loadingContainer" style="width: 100%; text-align: center;">
+  <h1>Loading map... <span id="loadProgress"></span></h1>
   <img id="loading" src="/static/images/helping.gif" style="width: 30%;" />
 </div>
-</div>
+<div id="map" class="map"></div>
 <div id="popup" class="popup" title="Welcome to OpenLayers"></div>
-
 <script>
 
-  function delay(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-
   async function fetchWithDelay(total, delayMs) {
     for(let i=0; i < total + 1; i++) {
-      console.log(`Fetching page ${i}`)
+      document.getElementById('loadProgress').innerHTML = `%${Math.round(i / total * 100, 2)}`;
       try {
         await fetch(`?fetch=1&offset=${i}`)
           .then((res) => res.json())
@@ -113,8 +108,10 @@
       } catch (err) {
         console.error(`Error on request ${i}`);
       }
-      await delay(delayMs);
     }
+    // Remove loader and show map
+    document.getElementById('loadingContainer').remove();
+    document.getElementById('map').style['opacity'] = 1;
   }
 
   async function loadMap() {
@@ -147,7 +144,7 @@
     const res = await fetch('?fetch=1')
       .then((res) => res.json())
     console.log(`Found ${res.total} pages of peers to fetch`)
-    fetchWithDelay(res.total, 1500);
+    fetchWithDelay(res.total);
 
     // Setup popup
     var popup = new ol.Overlay({
@@ -174,14 +171,14 @@
         $(element).popover('show');
       });
     });
-
-    // Remove loader
-    document.getElementById('loadingContainer').remove();
   }
 
   // Wait for full load
   addEventListener("DOMContentLoaded", (event) => {
-    setTimeout(loadMap, 2500);
+    document.getElementById('map').style['opacity'] = 0;
+    setTimeout(function() {
+      loadMap();
+    }, 1500);
   });
 </script>