From 71650c0e707bfe980a2c29f7d4c6c3ae5c1770a4 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sat, 4 Apr 2026 15:34:10 +0200
Subject: [PATCH] [style](trx-frontend-http): use card overlay for map loading
 indicator

Replace the plain centered text with the same overlay card style used
by the connection-lost screen (decode-history-overlay + content-overlay).
Toggle visibility via the is-hidden class for a smooth fade transition.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend/trx-frontend-http/assets/web/app.js   |  6 +++---
 .../trx-frontend-http/assets/web/index.html            |  7 ++++++-
 .../trx-frontend-http/assets/web/style.css             | 10 +---------
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index df682f2..cfe931b 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -4476,14 +4476,14 @@ function _initMapWhenReady() {
   const loadingEl = document.getElementById("map-loading");
   if (window.trx.map && typeof L !== "undefined") {
     if (_mapInitTimer) { clearInterval(_mapInitTimer); _mapInitTimer = null; }
-    if (loadingEl) loadingEl.style.display = "none";
+    if (loadingEl) loadingEl.classList.add("is-hidden");
     window.trx.map.initAprsMap();
     window.trx.map.sizeAprsMapToViewport();
     if (window.trx.map.aprsMap) setTimeout(() => window.trx.map.aprsMap.invalidateSize(), 50);
     return;
   }
-  // Not ready yet — show loading and poll until both are available.
-  if (loadingEl) loadingEl.style.display = "";
+  // Not ready yet — show overlay and poll until both are available.
+  if (loadingEl) loadingEl.classList.remove("is-hidden");
   if (!_mapInitTimer) {
     _mapInitTimer = setInterval(() => {
       if (_activeTab !== "map") { clearInterval(_mapInitTimer); _mapInitTimer = null; return; }
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 03e75fa..8e5a3e5 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -977,7 +977,12 @@
       </div>
     </div>
     <div id="tab-map" class="tab-panel" data-tab="map" style="display:none;">
-      <div id="map-loading" class="map-loading-msg">Loading map&hellip;</div>
+      <div id="map-loading" class="decode-history-overlay content-overlay" aria-live="polite" aria-atomic="true">
+        <div class="decode-history-overlay-card">
+          <div class="decode-history-overlay-title">Loading map&hellip;</div>
+          <div class="decode-history-overlay-sub">Waiting for map engine to initialise</div>
+        </div>
+      </div>
       <template id="tmpl-map">
       <div id="map-stage">
         <div class="map-overlay-panel">
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index 314504d..8ff986e 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -1703,15 +1703,7 @@ small { color: var(--text-muted); }
   min-height: 0;
   gap: 0.85rem;
 }
-.map-loading-msg {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 60vh;
-  font-size: 1.1rem;
-  color: var(--text-secondary);
-  opacity: 0.8;
-}
+/* map-loading uses the shared .decode-history-overlay .content-overlay classes */
 #map-stage {
   position: relative;
   flex: 0 1 auto;