sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[style](trx-frontend-http): use card overlay for map loading indicator

Browse Source 
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>
This commit is contained in:
Stan Grams
2026-04-04 15:34:10 +02:00
parent aadfa90a60
commit 71650c0e70
3 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+3 -3
View File
@@ -4476,14 +4476,14 @@ function _initMapWhenReady() {
const loadingEl = document.getElementById("map-loading"); const loadingEl = document.getElementById("map-loading");
if (window.trx.map && typeof L !== "undefined") { if (window.trx.map && typeof L !== "undefined") {
if (_mapInitTimer) { clearInterval(_mapInitTimer); _mapInitTimer = null; } 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.initAprsMap();
window.trx.map.sizeAprsMapToViewport(); window.trx.map.sizeAprsMapToViewport();
if (window.trx.map.aprsMap) setTimeout(() => window.trx.map.aprsMap.invalidateSize(), 50); if (window.trx.map.aprsMap) setTimeout(() => window.trx.map.aprsMap.invalidateSize(), 50);
return; return;
} }
// Not ready yet — show loading and poll until both are available. // Not ready yet — show overlay and poll until both are available.
if (loadingEl) loadingEl.style.display = ""; if (loadingEl) loadingEl.classList.remove("is-hidden");
if (!_mapInitTimer) { if (!_mapInitTimer) {
_mapInitTimer = setInterval(() => { _mapInitTimer = setInterval(() => {
if (_activeTab !== "map") { clearInterval(_mapInitTimer); _mapInitTimer = null; return; } if (_activeTab !== "map") { clearInterval(_mapInitTimer); _mapInitTimer = null; return; }
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+6 -1
View File
@@ -977,7 +977,12 @@
</div> </div>
</div> </div>
<div id="tab-map" class="tab-panel" data-tab="map" style="display:none;"> <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"> <template id="tmpl-map">
<div id="map-stage"> <div id="map-stage">
<div class="map-overlay-panel"> <div class="map-overlay-panel">
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+1 -9
View File
@@ -1703,15 +1703,7 @@ small { color: var(--text-muted); }
min-height: 0; min-height: 0;
gap: 0.85rem; gap: 0.85rem;
} }
.map-loading-msg { /* map-loading uses the shared .decode-history-overlay .content-overlay classes */
display: flex;
align-items: center;
justify-content: center;
height: 60vh;
font-size: 1.1rem;
color: var(--text-secondary);
opacity: 0.8;
}
#map-stage { #map-stage {
position: relative; position: relative;
flex: 0 1 auto; flex: 0 1 auto;