fix: load-more button animates with card list on tab switch
Build and Push Docker Image / build (push) Successful in 23s

Replace display:none toggle with opacity/transform transition so the
button fades and slides in sync with #stream-list.is-switching (0.18s ease).
Tab switch now hides the button at the same time as the list.
This commit is contained in:
Stardream
2026-05-23 00:02:37 +10:00
parent b39533c5b6
commit 90fe42a81a
+11 -4
View File
@@ -677,6 +677,12 @@
#sh-load-more-wrap { #sh-load-more-wrap {
text-align: center; text-align: center;
padding: 16px 0 24px; padding: 16px 0 24px;
transition: opacity 0.18s ease, transform 0.18s ease;
}
#sh-load-more-wrap.lm-hidden {
opacity: 0;
transform: translateY(6px);
pointer-events: none;
} }
#sh-load-more-btn { #sh-load-more-btn {
border: 1px solid var(--line); border: 1px solid var(--line);
@@ -737,7 +743,7 @@
<div id="loading-indicator" class="loader"></div> <div id="loading-indicator" class="loader"></div>
<p id="error-message" class="message hidden"></p> <p id="error-message" class="message hidden"></p>
<div id="stream-list"></div> <div id="stream-list"></div>
<div id="sh-load-more-wrap" style="display:none;"> <div id="sh-load-more-wrap" class="lm-hidden">
<button id="sh-load-more-btn"></button> <button id="sh-load-more-btn"></button>
</div> </div>
</main> </main>
@@ -1097,7 +1103,7 @@
if (!streams.length) { if (!streams.length) {
errorMessage.textContent = emptyText(activeStreamLabel); errorMessage.textContent = emptyText(activeStreamLabel);
errorMessage.classList.remove('hidden'); errorMessage.classList.remove('hidden');
document.getElementById('sh-load-more-wrap').style.display = 'none'; document.getElementById('sh-load-more-wrap')?.classList.add('lm-hidden');
return; return;
} }
if (_visibleCount === 0) _visibleCount = _calcBatch(); if (_visibleCount === 0) _visibleCount = _calcBatch();
@@ -1125,9 +1131,9 @@
if (lmWrap && lmBtn) { if (lmWrap && lmBtn) {
if (streams.length > _visibleCount) { if (streams.length > _visibleCount) {
lmBtn.textContent = t('list.load_more'); lmBtn.textContent = t('list.load_more');
lmWrap.style.display = ''; lmWrap.classList.remove('lm-hidden');
} else { } else {
lmWrap.style.display = 'none'; lmWrap.classList.add('lm-hidden');
} }
} }
}; };
@@ -1139,6 +1145,7 @@
activeStreamLabel = nextLabel; activeStreamLabel = nextLabel;
localStorage.setItem('home_stream_label', activeStreamLabel); localStorage.setItem('home_stream_label', activeStreamLabel);
streamList.classList.add('is-switching'); streamList.classList.add('is-switching');
document.getElementById('sh-load-more-wrap')?.classList.add('lm-hidden');
window.setTimeout(() => { window.setTimeout(() => {
_visibleCount = 0; _visibleCount = 0;
renderStreams(); renderStreams();