Spin the Export and Import buttons while they are working

Both buttons went dead quiet once clicked. An export of the whole database
can take a while to build and showed nothing at all until the file
appeared; an import says "Importing" once and never says anything again,
so a restore that takes minutes looked exactly like one that had hung. In
both cases the button still looked untouched and invited a second click -
which on an import means sending the whole file again into a half-applied
restore.

They now do what the speedtest RUN button already does: the label is
replaced by a spinner for as long as the work runs, and comes back
whatever the outcome, including the failures. The label keeps its space
while it is hidden, so the button does not resize under the pointer
mid-click, and a screen reader is told the button is busy since it cannot
see the swap. Export also refuses a second click while it is running,
which it never did before.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: cansofgrease

internal/web/ui/index.html

@@ -1141,6 +1141,15 @@
     padding:7px 14px;font:inherit;font-weight:600;font-size:12px;cursor:pointer;
     transition:filter .15s,transform .08s;}
   .btn:hover{filter:brightness(1.09);} .btn:active{transform:translateY(1px);} .btn:disabled{opacity:.55;cursor:default;}
+  /* Busy state for ordinary buttons, same swap the RUN pill uses: the label goes
+     visibility:hidden rather than display:none so the button keeps its own width
+     and nothing on the row shifts while the work runs. Opacity stays up - a busy
+     button is not a disabled one to look at, even though it is one to click. */
+  .btn .btn-busy{display:none;color:currentColor;}
+  .btn.busy{position:relative;}
+  .btn.busy:disabled{opacity:1;}
+  .btn.busy .btn-lbl{visibility:hidden;}
+  .btn.busy .btn-busy{display:block;position:absolute;inset:0;margin:auto;}
   /* Speed panel "RUN" button - a matte pill. Keeps the old pill shape and
      footprint. It is a .btn (flat accent fill, like every other button here) - only its
      size, the uppercase label, and the spinner swap are its own. */
@@ -1914,7 +1923,7 @@ <h1><svg class="logo" viewBox="390 0 1824 447" xmlns="http://www.w3.org/2000/svg
               <button class="cat on" type="button" data-cat="downtime">Downtime</button>
             </div>
           </div>
-          <button class="btn" id="exportBtn" type="button">Export</button>
+          <button class="btn" id="exportBtn" type="button"><span class="btn-lbl">Export</span><span class="btn-busy btn-spin" aria-hidden="true"></span></button>
         </div>
         <span class="muted card-foot">Exports the selected categories as one JSON file. <b>No passwords are exported</b> - not your login, not your iperf3 servers'. Restoring here keeps the iperf3 passwords already saved on this machine; on a different machine you re-enter them. <b>Your webhook and heartbeat URLs are included</b>, and those act as credentials - keep the file private.</span>
         <span class="muted card-foot" id="exportMsg"></span>
@@ -1930,7 +1939,7 @@ <h1><svg class="logo" viewBox="390 0 1824 447" xmlns="http://www.w3.org/2000/svg
             </div>
           </div>
           <div class="bk-actions">
-            <button class="btn" id="importBtn" type="button">Import</button>
+            <button class="btn" id="importBtn" type="button"><span class="btn-lbl">Import</span><span class="btn-busy btn-spin" aria-hidden="true"></span></button>
             <label class="filebtn" id="importFileBtn"><span class="flabel" id="importFileName">Choose file…</span><input type="file" id="importFile" accept="application/json,.json"></label>
           </div>
         </div>
@@ -7561,13 +7570,29 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
   const c=getCats('exportCats');
   if(!c.length){ $('exportMsg').textContent='Select at least one category to export.'; return; }
   $('exportMsg').textContent='';
-  const res=await downloadVia('api/export?'+c.map(x=>x+'=1').join('&'), 'pingularity-export.json');
+  btnBusy($('exportBtn'), true);
+  let res;
+  try{
+    res=await downloadVia('api/export?'+c.map(x=>x+'=1').join('&'), 'pingularity-export.json');
+  } finally {
+    btnBusy($('exportBtn'), false);
+  }
   if(res==='toobig'){
     $('exportMsg').textContent='This backup is too large to download in the browser. Fetch it with curl, or stop the service first and copy the database file with its -wal sidecar and pingularity.key - see the docs.';
   } else if(res==='fail'){
     $('exportMsg').textContent='Export failed.';
   }
 });
+// Swap a button's label for a spinner while its work runs, and refuse a second
+// click for the same reason the import handler already disabled itself: a repeat
+// send would upload the whole file again into a half-applied import. aria-busy
+// carries the same state to a screen reader, which cannot see the swap.
+function btnBusy(b, on){
+  if(!b) return;
+  b.classList.toggle('busy', on);
+  b.disabled = on;
+  if(on) b.setAttribute('aria-busy','true'); else b.removeAttribute('aria-busy');
+}
 // Transient status via the shared role=status toast (announced to screen readers).
 function flashStatus(msg){ const tb=$('undoToast'); if(!tb) return; tb.textContent=msg; tb.hidden=false; clearTimeout(tb._t); tb._t=setTimeout(()=>{ tb.hidden=true; }, 6000); }
 $('logDownload').addEventListener('click', async e=>{ e.preventDefault();
@@ -7596,7 +7621,7 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
   // A big restore takes minutes, and a second click would send the whole file again
   // into a half-applied import. The button comes back in the finally below, whatever
   // the outcome.
-  $('importBtn').disabled=true;
+  btnBusy($('importBtn'), true);
   try{
     // The File goes to fetch AS IS. f.text() first would materialise the entire
     // backup as a JS string and then a second UTF-8 copy of it, which a default
@@ -7637,7 +7662,7 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
       } else { msg.textContent='Import failed: '+(raw.trim().slice(0,200)||('HTTP '+r.status)); }
     }
   }catch(e){ msg.textContent='Import failed: '+e.message; }
-  finally{ $('importBtn').disabled=false; }
+  finally{ btnBusy($('importBtn'), false); }
 });
 // Outage detection only pauses when LATENCY probing is scheduled, so warn (here
 // and on the Alerts tab) when that's on AND a webhook is set - alerts would miss

internal/web/ui/ui.test.mjs

@@ -2112,14 +2112,23 @@ function driveImport({ ok = true, resp = {}, fetchFails = false } = {}) {
   let handler = null;
   const file = { name: 'backup.json', size: 290 * 1024 * 1024, reads: 0,
     async text() { this.reads++; return '{}'; } };
-  const btn = { disabled: false, addEventListener: (_ev, fn) => { handler = fn; } };
+  // A real classList, so the shipped btnBusy runs unmodified and the spinner swap
+  // is observed rather than stubbed away.
+  const classes = new Set();
+  const btn = { disabled: false, addEventListener: (_ev, fn) => { handler = fn; },
+    classList: { toggle: (c, on) => { on ? classes.add(c) : classes.delete(c); },
+      add: c => classes.add(c), remove: c => classes.delete(c), contains: c => classes.has(c) },
+    setAttribute: (k, v) => { btn._attrs = Object.assign(btn._attrs || {}, { [k]: v }); },
+    removeAttribute: k => { if (btn._attrs) delete btn._attrs[k]; },
+    _attrs: {}, classes };
   const msg = { textContent: '' };
   const els = { importBtn: btn, importFile: { files: [file] }, importMsg: msg,
     outagesSection: { style: { display: 'none' } } };
   const sent = { body: undefined, headers: null, disabledMidUpload: null };
   const fetchStub = async (_url, opt) => {
     sent.body = opt.body; sent.headers = opt.headers;
     sent.disabledMidUpload = btn.disabled; // a second click here would upload twice
+    sent.busyMidUpload = classes.has('busy'); // and the label is a spinner while it runs
     if (fetchFails) throw new Error('network went away');
     return { ok, status: ok ? 200 : 500, json: async () => resp,
       text: async () => JSON.stringify(resp) };
@@ -2128,10 +2137,13 @@ function driveImport({ ok = true, resp = {}, fetchFails = false } = {}) {
   const register = new Function('$', 'getCats', 'fetch', 'confirm', 'loadSettings',
     'loadAccess', 'formSnapshot', 'refreshStatus', 'refreshChart', 'refreshSpeedChart',
     'refreshHeatmap', 'loadOutages',
-    'let savedBody = null;\n' + extract("$('importBtn').addEventListener('click'") + ');');
+    'let savedBody = null;\n' + extract('function btnBusy(') + '\n' +
+    extract("$('importBtn').addEventListener('click'") + ');');
   register(id => els[id], () => ['pings'], fetchStub, () => true, noop, noop,
     () => '', () => {}, () => {}, () => {}, () => {}, noop);
-  return handler().then(() => ({ file, btn, msg, sent }));
+  sent.busyMidUpload = null;
+  const origFetch = fetchStub;
+  return handler().then(() => ({ file, btn, msg, sent, classes }));
 }
 
 test('import hands the file to fetch instead of reading it into memory', async () => {
@@ -2147,6 +2159,22 @@ test('import hands the file to fetch instead of reading it into memory', async (
     'the explicit Content-Type must survive - the File cannot be relied on to carry one');
 });
 
+// The spinner is the only feedback a long import gives: the message line says
+// "Importing" once and never changes again, so a restore that takes minutes looks
+// identical to one that hung. It has to go up for the whole upload and come down
+// on every exit, including the ones that threw.
+test('import swaps its label for a spinner while the upload runs, and puts it back', async () => {
+  const done = await driveImport();
+  assert.equal(done.sent.busyMidUpload, true,
+    'a multi-minute restore has to show it is working, or the operator cannot tell it from a hang');
+  assert.equal(done.classes.has('busy'), false,
+    'and the label has to come back on success, or the button reads as busy forever');
+  const refused = await driveImport({ ok: false, resp: { error: 'nope' } });
+  assert.equal(refused.classes.has('busy'), false, 'a refused import must not leave the spinner up');
+  const broken = await driveImport({ fetchFails: true });
+  assert.equal(broken.classes.has('busy'), false, 'nor must a network failure mid-upload');
+});
+
 test('import will not take a second click while the first is still uploading', async () => {
   const done = await driveImport();
   assert.equal(done.sent.disabledMidUpload, true,
@@ -3596,6 +3624,9 @@ function driveDownloads({ status = 200 } = {}) {
   const seen = [];
   const rawFetch = async (url, init) => {
     seen.push({ url: String(url), headers: new Headers((init && init.headers) || undefined) });
+    // Sampled on the wire: the spinner has to be up WHILE the export is fetching,
+    // which is the only window a stuck-looking button would be observed in.
+    if (els.exportBtn) out.busyOnWire = els.exportBtn.classes.has('busy');
     return {
       ok: status >= 200 && status < 300, status,
       headers: new Headers({ 'Content-Disposition': 'attachment; filename="from-server.txt"' }),
@@ -3611,11 +3642,18 @@ function driveDownloads({ status = 200 } = {}) {
     createElement: () => { const a = { clicked: false, click() { this.clicked = true; }, remove() {} }; anchors.push(a); return a; },
   };
   const els = {}, handlers = {};
-  const $ = id => els[id] || (els[id] = {
-    textContent: '',
-    addEventListener: (ev, fn) => { handlers[id + ':' + ev] = fn; },
-  });
-  const out = { seen, anchors, handlers, els, flashed: [], loginShown: 0 };
+  const out = { busyOnWire: null };
+  const $ = id => els[id] || (els[id] = (() => {
+    const classes = new Set();
+    return {
+      textContent: '', classes, disabled: false,
+      addEventListener: (ev, fn) => { handlers[id + ':' + ev] = fn; },
+      classList: { toggle: (c, on) => { on ? classes.add(c) : classes.delete(c); },
+        add: c => classes.add(c), remove: c => classes.delete(c), contains: c => classes.has(c) },
+      setAttribute() {}, removeAttribute() {},
+    };
+  })());
+  Object.assign(out, { seen, anchors, handlers, els, flashed: [], loginShown: 0 });
   const src =
     soleAnchor('const _fetch=window.fetch.bind(window);',
       'the raw pre-wrapper handle the login POST uses is gone, and the page has no unmarked escape hatch') + '\n' +
@@ -3637,6 +3675,7 @@ function driveDownloads({ status = 200 } = {}) {
     'const fetch=window.fetch;\n' +
     script.match(/const downloadCapBytes = [^;]*;/)[0] + '\n' +
     sliceBetween('async function downloadVia(', "$('exportBtn').addEventListener('click'") + '\n' +
+    extract('function btnBusy(') + '\n' +
     extract(soleAnchor("$('exportBtn').addEventListener('click'")) + ');\n' +
     extract(soleAnchor("$('logDownload').addEventListener('click'")) + ');\n' +
     extract(soleAnchor("$('csvDownload').addEventListener('click'")) + ');\n' +
@@ -3652,6 +3691,38 @@ function driveDownloads({ status = 200 } = {}) {
   return out;
 }
 
+// The swap is half JS and half stylesheet: the class the handlers toggle does
+// nothing on its own. These pin the two rules that carry the meaning, and the
+// one that keeps the button from resizing under the operator.
+test('the busy class actually hides the label and shows the spinner', () => {
+  const rule = sel => {
+    const m = html.match(new RegExp(sel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\{([^}]*)\\}'));
+    assert.ok(m, `${sel} is not in the stylesheet, so the busy state renders as nothing at all`);
+    return m[1];
+  };
+  assert.match(rule('.btn.busy .btn-lbl'), /visibility:hidden/,
+    'the label has to stay in the layout while it is hidden - display:none would shrink the button ' +
+    'mid-click and shift the row under the pointer');
+  assert.match(rule('.btn.busy .btn-busy'), /display:block/,
+    'the spinner is display:none by default, so without this the busy button shows nothing at all');
+  assert.match(rule('.btn .btn-busy'), /display:none/,
+    'an idle button must not show a spinner beside its label');
+});
+
+// A default export is the whole database and can take a while to build, during
+// which downloadVia shows nothing at all - no progress, no message. Without the
+// swap the button looks untouched and invites a second click that starts the
+// whole export again.
+test('export swaps its label for a spinner while the file is being fetched, and puts it back', async () => {
+  const d = driveDownloads();
+  await d.handlers['exportBtn:click']({ preventDefault() {} });
+  assert.equal(d.busyOnWire, true,
+    'the export button looked idle while the server was building the file, so a second click starts a second export');
+  assert.equal(d.els.exportBtn.classes.has('busy'), false,
+    'and the label has to come back once the file is handed over');
+  assert.equal(d.els.exportBtn.disabled, false, 'a finished export must leave a usable button');
+});
+
 test('requests through the fetch wrapper are marked, or the browser stacks its own password box on top of the login overlay', async () => {
   const d = driveDownloads();
   await d.markedFetch('api/status');