From fb8ebd7924c016f0ef2a2a8b5b2a9350e35f223e Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Mon, 6 Jul 2026 19:15:27 +0100
Subject: [PATCH] fix(webui/overview): paint Backups header immediately,
 confine spinner to content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching to the fleet Backups tab blanked the whole pane to a bare, headerless
lpLoadingBox() while the (script-heavy) backup center loaded, so it read as the
entire section reloading with no indication of where you'd landed — then the
header + content appeared at once when the fetch resolved.

Render the shared .ov-tab-header (💾 Backups + description + divider) up front and
drop the spinner into an .ov-tab-body beneath it, matching the per-app detail
tabs' header-first idiom (and the recent Admin board fix). The header stays put
and only the content area swaps in once BackupPage mounts.

The Migrate tab already does this — mountMigrate() injects its header and the
sub-tab strip is static, so its spinner is already confined to the Restore/Peers
sub-panel — so no change was needed there.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../components/apps/overview/js/overview-manager.js       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js b/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js
index 919d536..e67406e 100644
--- a/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js
+++ b/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js
@@ -618,7 +618,13 @@ class OverviewManager {
       } catch (_) {}
       return;
     }
-    pane.innerHTML = lpLoadingBox('Loading backup center…');
+    // Paint the shared header immediately and confine the spinner to the body
+    // BENEATH the divider — switching to Backups shows the tab's title straight
+    // away and only the content area swaps in once the (script-heavy) backup
+    // center finishes loading, instead of blanking the whole pane to a bare
+    // headerless loader. Mirrors the per-app detail tabs' header-first idiom.
+    pane.innerHTML = this.renderHeader('backups')
+      + `<div class="ov-tab-body">${lpLoadingBox('Loading backup center…')}</div>`;
     this._loadBackupCenter(pane, sub);
   }