Skip to content

feat: richer loading skeletons for remote hosts + containers #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
falkoro merged 1 commit into from
May 31, 2026
Merged

feat: richer loading skeletons for remote hosts + containers #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions public/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion src/pages.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)
}
Expand Down