From ab72771ccc4edf5e217dc82f72e4b46c165f4c04 Mon Sep 17 00:00:00 2001
From: falkoro <39274208+falkoro@users.noreply.github.com>
Date: Sun, 31 May 2026 17:53:10 +0200
Subject: [PATCH] feat: richer loading skeletons for remote hosts + containers

Replace the two plain grey boxes with skeletons that mimic the real cards while
data loads (the remote-hosts SSH check takes a couple seconds): a host-card
placeholder with a name line, two meter bars, a meta line, and three container-row
placeholders, all shimmering; the local containers list gets row placeholders too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/app.css | 7 +++++++
 src/pages.rs   | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/app.css b/public/app.css
index 96e53fa..9158687 100644
--- a/public/app.css
+++ b/public/app.css
@@ -498,6 +498,13 @@ body.shells-locked .container-actions{display:none}
 .skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.045);border-radius:6px}
 .skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(139,246,255,.10),transparent);animation:sd-shimmer 1.25s ease-in-out infinite}
 .skel-card{height:60px;margin-bottom:7px;border:1px solid rgba(255,255,255,.06)}
+/* Richer skeletons that mimic the real cards while data loads. */
+.skel-host{border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:10px;display:flex;flex-direction:column;gap:8px}
+.skel-line{height:11px;border-radius:5px}
+.skel-bar{height:8px;border-radius:5px}
+.skel-crow{height:32px;border-radius:6px;margin-bottom:7px}
+.skel-w50{width:50%}
+.skel-w70{width:70%}
 .metrics.loading .meter{position:relative}
 .metrics.loading .meter::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(139,246,255,.18),transparent);animation:sd-shimmer 1.25s ease-in-out infinite}
 /* Remote host monitor widget */
diff --git a/src/pages.rs b/src/pages.rs
index 923c154..e198d5e 100644
--- a/src/pages.rs
+++ b/src/pages.rs
@@ -43,7 +43,7 @@ fn links_panel_html(config: &Config) -> String {
 
 fn workspace(links_panel: &str) -> String {
     format!(
-        r#"<div class="workspace compact"><aside class="sidebar"><div class="sidebar-head"><span class="sidebar-head-title">Dashboard</span><button class="ghost sidebar-gear" id="settingsBtn" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6V20a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-.6 1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1H4a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 .6-1 1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6V4a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 .6 1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.23.36.45.7.6 1H20a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-.5 1Z"/></svg><span>Configure</span></button></div><section class="panel metrics-panel" id="metricsPanel"><div class="panel-header"><div><h2>Machine</h2><p class="muted" id="metricsHost">—</p></div></div><div class="metrics loading"><div class="metric"><div class="metric-top"><span>CPU</span><span data-m="cpu">—</span></div><div class="meter"><i data-bar="cpu"></i></div></div><div class="metric"><div class="metric-top"><span>RAM</span><span data-m="mem">—</span></div><div class="meter"><i data-bar="mem"></i></div></div><div class="metric-temps" id="metricTemps"></div><div class="metric-load muted" id="metricLoad">—</div></div></section><section class="panel remote-panel" id="remotePanel"><div class="panel-header"><div><h2>Remote Hosts</h2><p class="muted">Server ping and containers</p></div><button type="button" id="editRemoteHostsBtn"><span>Edit</span></button></div><div class="remote-list" id="remoteHostList" aria-live="polite"><div class="skeleton skel-card"></div><div class="skeleton skel-card"></div></div></section><section class="panel containers-panel" id="containersPanel"><div class="panel-header"><div><h2>Local Containers</h2><p class="muted">Docker and Podman</p></div></div><div class="container-list" id="containerList" aria-live="polite"><div class="skeleton skel-card"></div><div class="skeleton skel-card"></div></div></section><section class="panel unlock-panel" id="unlockPanel"><div><h2>Shell Unlock</h2><p class="muted">Input, previews, and summaries need the second password.</p></div><form class="unlock-form" id="unlockForm"><input id="unlockPassword" name="password" type="password" autocomplete="one-time-code" placeholder="second password"><button class="primary" type="submit"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg><span>Unlock</span></button></form><div class="unlock-status" id="unlockStatus"></div></section>{}</aside><section class="main-stack"><section class="panel terminal-panel" id="shellSection" aria-live="polite"><div class="panel-header"><div><h2>Shells</h2><p class="muted">All panes side-by-side. Type into any shell.</p></div><div class="shell-tools"><span class="pill" id="streamState">stream idle</span><button type="button" id="viewToggle">Focus</button><select id="lineCount" aria-label="Line count"><option value="80">80</option><option value="200">200</option><option value="500">500</option></select><button type="button" id="followToggle">Follow</button><button type="button" id="densityToggle">Compact</button><button type="button" id="refreshSummaryBtn" title="Refresh shell summaries"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg><span>Summary</span></button><button type="button" id="refreshShellsTopBtn"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg><span>Refresh</span></button></div></div><div class="shell-tabs" id="shellTabs"></div><input id="imageFile" type="file" accept="image/*" hidden><div class="terminal-grid" id="shells"></div></section></section></div></main>"#,
+        r#"<div class="workspace compact"><aside class="sidebar"><div class="sidebar-head"><span class="sidebar-head-title">Dashboard</span><button class="ghost sidebar-gear" id="settingsBtn" type="button"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6V20a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-.6 1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1H4a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 .6-1 1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6V4a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 .6 1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.23.36.45.7.6 1H20a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-.5 1Z"/></svg><span>Configure</span></button></div><section class="panel metrics-panel" id="metricsPanel"><div class="panel-header"><div><h2>Machine</h2><p class="muted" id="metricsHost">—</p></div></div><div class="metrics loading"><div class="metric"><div class="metric-top"><span>CPU</span><span data-m="cpu">—</span></div><div class="meter"><i data-bar="cpu"></i></div></div><div class="metric"><div class="metric-top"><span>RAM</span><span data-m="mem">—</span></div><div class="meter"><i data-bar="mem"></i></div></div><div class="metric-temps" id="metricTemps"></div><div class="metric-load muted" id="metricLoad">—</div></div></section><section class="panel remote-panel" id="remotePanel"><div class="panel-header"><div><h2>Remote Hosts</h2><p class="muted">Server ping and containers</p></div><button type="button" id="editRemoteHostsBtn"><span>Edit</span></button></div><div class="remote-list" id="remoteHostList" aria-live="polite"><div class="skel-host"><div class="skeleton skel-line skel-w50"></div><div class="skeleton skel-bar"></div><div class="skeleton skel-bar"></div><div class="skeleton skel-line skel-w70"></div><div class="skeleton skel-crow"></div><div class="skeleton skel-crow"></div><div class="skeleton skel-crow"></div></div></div></section><section class="panel containers-panel" id="containersPanel"><div class="panel-header"><div><h2>Local Containers</h2><p class="muted">Docker and Podman</p></div></div><div class="container-list" id="containerList" aria-live="polite"><div class="skeleton skel-crow"></div><div class="skeleton skel-crow"></div><div class="skeleton skel-crow"></div></div></section><section class="panel unlock-panel" id="unlockPanel"><div><h2>Shell Unlock</h2><p class="muted">Input, previews, and summaries need the second password.</p></div><form class="unlock-form" id="unlockForm"><input id="unlockPassword" name="password" type="password" autocomplete="one-time-code" placeholder="second password"><button class="primary" type="submit"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg><span>Unlock</span></button></form><div class="unlock-status" id="unlockStatus"></div></section>{}</aside><section class="main-stack"><section class="panel terminal-panel" id="shellSection" aria-live="polite"><div class="panel-header"><div><h2>Shells</h2><p class="muted">All panes side-by-side. Type into any shell.</p></div><div class="shell-tools"><span class="pill" id="streamState">stream idle</span><button type="button" id="viewToggle">Focus</button><select id="lineCount" aria-label="Line count"><option value="80">80</option><option value="200">200</option><option value="500">500</option></select><button type="button" id="followToggle">Follow</button><button type="button" id="densityToggle">Compact</button><button type="button" id="refreshSummaryBtn" title="Refresh shell summaries"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg><span>Summary</span></button><button type="button" id="refreshShellsTopBtn"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg><span>Refresh</span></button></div></div><div class="shell-tabs" id="shellTabs"></div><input id="imageFile" type="file" accept="image/*" hidden><div class="terminal-grid" id="shells"></div></section></section></div></main>"#,
         links_panel
     )
 }