From 16cc32d8ce458c0a3bc38b419e313563ec12e123 Mon Sep 17 00:00:00 2001
From: Marcus Kida <marcus.kida@bearologics.com>
Date: Tue, 10 Feb 2026 01:04:42 +0100
Subject: [PATCH] Add loading indicators and route corridor radius

---
 static/app.js     | 18 +++++++++++++++-
 static/index.html |  6 ++++++
 static/style.css  | 53 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/static/app.js b/static/app.js
index 774c0d8..8771f51 100644
--- a/static/app.js
+++ b/static/app.js
@@ -43,6 +43,9 @@
     var toInput = document.getElementById("route-to");
     var routeBtn = document.getElementById("route-btn");
     var clearBtn = document.getElementById("clear-btn");
+    var corridorRow = document.getElementById("corridor-row");
+    var corridorRange = document.getElementById("corridor-range");
+    var corridorVal = document.getElementById("corridor-val");
     var pinControlsEl = document.getElementById("pin-controls");
     var pinRadiusInput = document.getElementById("pin-radius");
     var pinClearBtn = document.getElementById("pin-clear");
@@ -87,6 +90,8 @@
             }
             acTimer = setTimeout(function () {
                 acController = new AbortController();
+                listEl.innerHTML = '<li class="ac-loading"><span class="spinner"></span>Searching...</li>';
+                listEl.classList.add("open");
                 fetch(
                     "https://nominatim.openstreetmap.org/search?" +
                         new URLSearchParams({
@@ -408,7 +413,7 @@
             body: JSON.stringify({
                 points: routePoints,
                 band: getSelectedBand(),
-                corridor: 10,
+                corridor: parseInt(corridorRange.value),
                 network: getSelectedNetworks() === "all" ? [] : getSelectedNetworks().split(","),
                 hotspots: showHotspots.checked,
                 inactive: showInactive.checked,
@@ -436,6 +441,7 @@
 
         if (isPinMode) clearPin();
         routeBtn.disabled = true;
+        routeBtn.innerHTML = '<span class="spinner"></span>Routing...';
         showStatus("Geocoding...");
 
         geocode(fromAddr)
@@ -462,6 +468,7 @@
                 routePoints = latLngs;
                 isRouteMode = true;
                 clearBtn.style.display = "";
+                corridorRow.style.display = "";
 
                 return fetchRouteRepeaters();
             })
@@ -471,6 +478,7 @@
             })
             .then(function () {
                 routeBtn.disabled = false;
+                routeBtn.textContent = "Route";
             });
     }
 
@@ -482,6 +490,7 @@
         routePoints = null;
         isRouteMode = false;
         clearBtn.style.display = "none";
+        corridorRow.style.display = "none";
         fromInput.value = "";
         toInput.value = "";
         fetchRepeaters();
@@ -737,6 +746,13 @@
         fetchPinRepeaters();
     });
 
+    corridorRange.addEventListener("input", function () {
+        corridorVal.textContent = corridorRange.value;
+    });
+    corridorRange.addEventListener("change", function () {
+        if (isRouteMode) fetchRouteRepeaters();
+    });
+
     routeBtn.addEventListener("click", findRoute);
     clearBtn.addEventListener("click", clearRoute);
 
diff --git a/static/index.html b/static/index.html
index fe6147c..30c0969 100644
--- a/static/index.html
+++ b/static/index.html
@@ -42,6 +42,12 @@
             <button id="route-btn">Route</button>
             <button id="clear-btn">Clear</button>
         </div>
+        <div class="controls-row route-row corridor-row" id="corridor-row" style="display:none">
+            <label class="corridor-label">Corridor
+                <input type="range" id="corridor-range" min="1" max="50" value="10" />
+                <span id="corridor-val">10</span> km
+            </label>
+        </div>
         <div id="pin-controls" class="pin-controls" style="display:none">
             <div class="controls-row pin-header">
                 <label class="pin-radius-label">Radius
diff --git a/static/style.css b/static/style.css
index 5d22ee8..255f199 100644
--- a/static/style.css
+++ b/static/style.css
@@ -284,6 +284,40 @@ html, body {
     font-size: 11px;
 }
 
+.autocomplete-list li.ac-loading {
+    color: var(--text-fainter);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.autocomplete-list li.ac-loading:hover {
+    background: none;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.spinner {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid var(--border);
+    border-top-color: var(--text-faint);
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+}
+
+#route-btn .spinner {
+    width: 14px;
+    height: 14px;
+    border-color: rgba(255,255,255,0.3);
+    border-top-color: white;
+    vertical-align: middle;
+    margin-right: 4px;
+}
+
 .route-row input[type="text"] {
     width: 100%;
     padding: 7px 10px;
@@ -340,6 +374,25 @@ html, body {
     background: var(--clear-btn-hover);
 }
 
+.corridor-label {
+    font-size: 12px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+}
+
+.corridor-label input[type="range"] {
+    flex: 1;
+    cursor: pointer;
+}
+
+.corridor-label span {
+    min-width: 20px;
+    text-align: right;
+}
+
 .coords-row {
     margin-top: 6px;
     font-size: 11px;