Add progress bar

css/app.css

@@ -134,3 +134,10 @@ a:visited {
 #map {
     height: calc(100vh - 107px);
 }
+
+#map-progress {
+    position: absolute;
+    top: 30vh;
+    max-width: 600px;
+    left: 35vw;
+}

index.html

@@ -80,7 +80,9 @@
             </aside>
         </div>
         <div class="column is-full">
-            <div id="map"></div>
+            <div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
+                <progress id="map-progress" class="p-2 m-4 progress is-medium is-link" aria-label="Map loading..." />
+            </div>
         </div>
     </div>
     <!-- Sites data modal -->

js/index.js

@@ -2,13 +2,16 @@ import GIS from './gis.js';
 import UI from './ui.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
+    let progress = document.querySelector('progress');
     const init = await GIS.initMap('map');
+    progress.classList.add('is-hidden');
     let {map, sites} = init;
 
+    map._container.setAttribute('aria-busy', false);
+
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
     UI.toggleMenu('siti');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
     UI.projectInfo('#project-info');
-
 });