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>
<div class="panel-body">
<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>
</details>
@ -434,15 +436,39 @@ const proposalId = id ?? '';
if (!container) return;
try {
container.innerHTML = `
<div class="state-card ui-card ui-card-soft">
<p class="loading">Loading results…</p>
</div>
`;
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;
}
const host = document.getElementById('results-chart-host');
const chart = host?.querySelector('.results-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;
}
@ -456,7 +482,17 @@ const proposalId = id ?? '';
chart.dataset.enabled = '1';
} 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);
}
}