ux: polish results empty states

This commit is contained in:
Marco Allegretti 2026-02-05 17:48:44 +01:00
parent 5b5a11a96d
commit f322094ba0

View file

@ -312,7 +312,9 @@ const proposalId = id ?? '';
</summary> </summary>
<div class="panel-body"> <div class="panel-body">
<div id="detailed-results" class="detailed-results"> <div id="detailed-results" class="detailed-results">
<p class="loading-small">Loading results…</p> <div class="state-card ui-card ui-card-soft">
<p class="loading">Loading results…</p>
</div>
</div> </div>
</div> </div>
</details> </details>
@ -434,15 +436,39 @@ const proposalId = id ?? '';
if (!container) return; if (!container) return;
try { try {
container.innerHTML = `
<div class="state-card ui-card ui-card-soft">
<p class="loading">Loading results…</p>
</div>
`;
if (!token) { if (!token) {
container.innerHTML = '<p class="error">Login required to view results</p>'; container.innerHTML = `
<div class="state-card ui-card ui-card-soft">
<p class="error">Login required to view results.</p>
<p class="hint">Sign in to see the final breakdown and method details.</p>
<div class="state-actions">
<a class="ui-btn ui-btn-primary" href="/login">Login</a>
</div>
</div>
`;
return; return;
} }
const host = document.getElementById('results-chart-host'); const host = document.getElementById('results-chart-host');
const chart = host?.querySelector('.results-chart'); const chart = host?.querySelector('.results-chart');
if (!host || !chart) { if (!host || !chart) {
container.innerHTML = '<p class="error">Results chart unavailable</p>'; container.innerHTML = `
<div class="state-card ui-card ui-card-soft">
<p class="error">Results chart unavailable.</p>
<p class="hint">Try reloading the results.</p>
<div class="state-actions">
<button type="button" class="ui-btn ui-btn-secondary" id="retry-results">Retry</button>
</div>
</div>
`;
document.getElementById('retry-results')?.addEventListener('click', loadDetailedResults);
return; return;
} }
@ -456,7 +482,17 @@ const proposalId = id ?? '';
chart.dataset.enabled = '1'; chart.dataset.enabled = '1';
} catch (error) { } catch (error) {
container.innerHTML = '<p class="error">Error loading results</p>'; container.innerHTML = `
<div class="state-card ui-card ui-card-soft">
<p class="error">Error loading results.</p>
<p class="hint">Please try again.</p>
<div class="state-actions">
<button type="button" class="ui-btn ui-btn-secondary" id="retry-results">Retry</button>
</div>
</div>
`;
document.getElementById('retry-results')?.addEventListener('click', loadDetailedResults);
} }
} }