nemunaire/repeater
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

app: Show pulsing loading dots until first status fetch

Browse source 
Default the status badges to a pulsing "loading" dot instead of the
static offline state, signalling that the data is not yet fetched. The
dots are replaced with their real state on the first /api/status update.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nemunaire 2026-06-10 18:08:27 +09:00
commit 15d17ed35e
2 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
cmd/repeater/static/index.html
View file

@ -22,16 +22,16 @@
</div> </div>
<div class="connection-info"> <div class="connection-info">
<div class="status-badge" id="wifiStatus"> <div class="status-badge" id="wifiStatus">
<span class="status-dot offline"></span> <span class="status-dot loading"></span>
<span class="status-text">Disconnected</span> <span class="status-text">Chargement…</span>
</div> </div>
<div class="status-badge" id="ethernetStatus" hidden> <div class="status-badge" id="ethernetStatus" hidden>
<span class="status-dot offline"></span> <span class="status-dot loading"></span>
<span class="status-text">Ethernet</span> <span class="status-text">Ethernet</span>
</div> </div>
<div class="status-badge" id="hotspotStatus"> <div class="status-badge" id="hotspotStatus">
<span class="status-dot offline"></span> <span class="status-dot loading"></span>
<span class="status-text">Hotspot actif</span> <span class="status-text">Chargement…</span>
</div> </div>
</div> </div>
</div> </div>

5
cmd/repeater/static/style.css
View file

@ -131,6 +131,11 @@ body {
animation: blink 1.2s ease-in-out infinite; animation: blink 1.2s ease-in-out infinite;
} }
.status-dot.loading {
background: var(--text-tertiary);
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes blink { @keyframes blink {
0%, 100% { opacity: 1; } 0%, 100% { opacity: 1; }
50% { opacity: 0.3; } 50% { opacity: 0.3; }