From 8d614d44f882b5a49fc5415eb3179ab14ffcf5d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Mon, 21 Oct 2024 14:52:13 +0200
Subject: [PATCH] Add progress bar

---
 css/app.css | 7 +++++++
 index.html  | 4 +++-
 js/index.js | 5 ++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/css/app.css b/css/app.css
index 650ea11..de129d4 100644
--- a/css/app.css
+++ b/css/app.css
@@ -133,4 +133,11 @@ a:visited {
 /* Leaflef map container */
 #map {
     height: calc(100vh - 107px);
+}
+
+#map-progress {
+    position: absolute;
+    top: 30vh;
+    max-width: 600px;
+    left: 35vw;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index f223ced..6ad9b5a 100644
--- a/index.html
+++ b/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 -->
diff --git a/js/index.js b/js/index.js
index 94b1122..da3db0e 100644
--- a/js/index.js
+++ b/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');
-
 });