fix(podcasts): page-load polls during downloads; indeterminate bar slides

A fresh detail-page load while downloads were active rendered the
NON-polling episode container (PollingEpisodeList was only reachable
via the /episodes partial route after Refresh), so the page froze
until the user refreshed manually. PodcastDetailPage now picks the
variant the same way the route does — HasActiveDownloads selects the
every-2s poll container.

Also: the indeterminate progress bar (feeds without Content-Length,
e.g. Scribl) used animate-pulse, which fades in place and reads as
frozen; replaced with a sliding shimmer keyframe
(.podcast-progress-indeterminate, 33% sliver, translating -100% ->
300%) in input.css. The live MB counter stays.

§0 item 1.
This commit is contained in:
John O'Keefe committed 2026-10-30 08:53:35 -04:00
1 parent 7ea84043fa
commit cdf81f6cf4
4 files changed
+70 -40

No files matched your search

+13 -4
View File
@@ -203,8 +203,17 @@ templ PodcastDetailPage(user User, data PodcastDetailData) {
</div>
}
<!-- Episode list (self-refreshing htmx partial) -->
@PodcastEpisodeList(data)
<!-- Episode list (self-refreshing htmx partial). Pick the
polling variant at page-render time when downloads are
active — otherwise a fresh page load mid-download
renders the non-polling container and never updates
(the polling variant was previously only reachable via
the /episodes partial route). -->
if HasActiveDownloads(data.Episodes) {
@PodcastEpisodeListPolling(data)
} else {
@PodcastEpisodeList(data)
}
</main>
@PodcastUnsubscribeModal(data)
</body>
@@ -284,8 +293,8 @@ templ PodcastEpisodeRowView(ep PodcastEpisodeRow) {
{ FormatEpisodeSize(ep.ProgressReceived) + " / " + FormatEpisodeSize(ep.ProgressTotal) }
</p>
} else {
<div class="h-1.5 w-full rounded-full overflow-hidden animate-pulse" style="background-color: var(--surface-secondary);">
<div class="h-full w-1/3 rounded-full" style="background-color: var(--accent);"></div>
<div class="podcast-progress-indeterminate h-1.5 w-full rounded-full overflow-hidden" style="background-color: var(--surface-secondary);">
<div class="h-full rounded-full" style="background-color: var(--accent);"></div>
</div>
<p class="text-xs mt-0.5 tabular-nums" style="color: var(--text-secondary)">{ FormatEpisodeSize(ep.ProgressReceived) }</p>
}