danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Hide dashboard status placeholders until ready

Browse source 
- Keep the sidebar and dashboard service cards neutral until the first /status payload arrives
- Prevent placeholder source names and card text from flashing on dashboard load
- Reveal the real service status only after the live snapshot populates the UI
This commit is contained in:
Antti Kettunen 2026-05-02 15:19:19 +03:00
parent a2176af00e
commit 2693640c62
No known key found for this signature in database
GPG key ID: C6B2A3D250359BD7
3 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
webui/index.html
View file

@ -279,17 +279,17 @@
<!-- Status Section -->
<div class="status-section">
<h4 class="status-title">Service Status</h4>
<div class="status-indicator" id="metadata-source-indicator">
<div class="status-indicator" id="metadata-source-indicator" data-status-ready="false">
<span class="status-dot disconnected"></span>
<span class="status-name" id="metadata-source-name">Spotify</span>
<span class="status-name" id="metadata-source-name">Metadata Source</span>
</div>
<div class="status-indicator" id="media-server-indicator">
<div class="status-indicator" id="media-server-indicator" data-status-ready="false">
<span class="status-dot disconnected"></span>
<span class="status-name" id="media-server-name">Plex</span>
<span class="status-name" id="media-server-name">Media Server</span>
</div>
<div class="status-indicator" id="soulseek-indicator">
<div class="status-indicator" id="soulseek-indicator" data-status-ready="false">
<span class="status-dot disconnected"></span>
<span class="status-name" id="download-source-name">Soulseek</span>
<span class="status-name" id="download-source-name">Download Source</span>
</div>
</div>
</div>
@ -616,9 +616,9 @@
<div class="dashboard-section">
<h3 class="section-title">Service Status</h3>
<div class="service-status-grid">
<div class="service-card" id="metadata-source-service-card">
<div class="service-card" id="metadata-source-service-card" data-status-ready="false">
<div class="service-card-header">
<span class="service-card-title" id="metadata-source-title">Spotify</span>
<span class="service-card-title" id="metadata-source-title">Metadata Source</span>
<span class="service-card-indicator disconnected"
id="metadata-source-status-indicator">●</span>
</div>
@ -629,9 +629,9 @@
onclick="testDashboardConnection(getActiveMetadataSource())">Test Connection</button>
</div>
</div>
<div class="service-card" id="media-server-service-card">
<div class="service-card" id="media-server-service-card" data-status-ready="false">
<div class="service-card-header">
<span class="service-card-title" id="media-server-service-name">Server</span>
<span class="service-card-title" id="media-server-service-name">Media Server</span>
<span class="service-card-indicator disconnected"
id="media-server-status-indicator">●</span>
</div>
@ -642,9 +642,9 @@
Connection</button>
</div>
</div>
<div class="service-card" id="soulseek-service-card">
<div class="service-card" id="soulseek-service-card" data-status-ready="false">
<div class="service-card-header">
<span class="service-card-title" id="download-source-title">Soulseek</span>
<span class="service-card-title" id="download-source-title">Download Source</span>
<span class="service-card-indicator disconnected"
id="soulseek-status-indicator">●</span>
</div>

6
webui/static/shared-helpers.js
View file

@ -3282,9 +3282,14 @@ function getMetadataSourcePresentation(metadataStatus, spotifyStatus) {
}
function updateServiceStatus(service, statusData, spotifyStatus = null) {
const serviceCard = document.getElementById(`${service}-service-card`);
const indicator = document.getElementById(`${service}-status-indicator`);
const statusText = document.getElementById(`${service}-status-text`);
if (serviceCard) {
serviceCard.dataset.statusReady = 'true';
}
if (indicator && statusText) {
if (service === 'metadata-source') {
const presentation = getMetadataSourcePresentation(statusData || {}, spotifyStatus || {});
@ -3353,6 +3358,7 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
function updateSidebarServiceStatus(service, statusData, spotifyStatus = null) {
const indicator = document.getElementById(`${service}-indicator`);
if (indicator) {
indicator.dataset.statusReady = 'true';
const dot = indicator.querySelector('.status-dot');
const nameElement = indicator.querySelector('.status-name');

13
webui/static/style.css
View file

@ -2820,6 +2820,19 @@ body.helper-mode-active #dashboard-activity-feed:hover {
font-weight: 400;
}
.status-indicator[data-status-ready="false"] .status-dot,
.status-indicator[data-status-ready="false"] .status-name,
.service-card[data-status-ready="false"] .service-card-title,
.service-card[data-status-ready="false"] .service-card-indicator,
.service-card[data-status-ready="false"] .service-card-status-text,
.service-card[data-status-ready="false"] .service-card-response-time {
visibility: hidden;
}
#metadata-source-service-card[data-status-ready="false"] .service-card-button {
visibility: hidden;
}
/* =====================================
MAIN CONTENT AREA STYLING
===================================== */