engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tts: queued/loading indicator on play button

Browse source 
Auto-play TTS used to show zero feedback between message arrival and
audio start — users waited blind. Now the play button shows:

  Queued + pulsing dot  — message is waiting in line
  Loading + spinner     — actively fetching audio from speech service
  Pause                 — audio is actually playing

Manual Play also uses the same spinner instead of the old 'Streaming...'
text-only state. Indicator clears on play, pause, end, error, and when
auto-play is toggled off.
This commit is contained in:
russell@unturf.com 2026-06-03 11:19:19 -04:00
parent d405ebc6f9
commit adc4fd79d2
No known key found for this signature in database
2 changed files with 78 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

36
static/css/style.css
View file

@ -1392,3 +1392,39 @@ a:hover {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* TTS play-button states: queued (waiting in line) → loading (fetching) → playing.
Gives auto-play users a visible signal during the gap between message arrival
and audio start, so the wait doesn't feel like a hang. */
.tts-queued {
cursor: wait !important;
opacity: 0.85;
}
.tts-queued::after {
content: "•";
display: inline-block;
margin-left: 6px;
animation: ttsPulse 1.2s ease-in-out infinite;
}
.tts-loading {
cursor: progress !important;
}
.tts-loading::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-left: 8px;
vertical-align: -1px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ttsSpin 0.7s linear infinite;
}
@keyframes ttsPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes ttsSpin {
to { transform: rotate(360deg); }
}