From 90fe42a81a437daeaded0e5b13f1a9a7dfca241d Mon Sep 17 00:00:00 2001
From: Stardream <gayhub@stardream.online>
Date: Sat, 23 May 2026 00:02:37 +1000
Subject: [PATCH] fix: load-more button animates with card list on tab switch

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.
---
 public/index.html | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index c3573ea..72e6ba8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -677,6 +677,12 @@
     #sh-load-more-wrap {
       text-align: center;
       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 {
       border: 1px solid var(--line);
@@ -737,7 +743,7 @@
       <div id="loading-indicator" class="loader"></div>
       <p id="error-message" class="message hidden"></p>
       <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>
       </div>
     </main>
@@ -1097,7 +1103,7 @@
         if (!streams.length) {
           errorMessage.textContent = emptyText(activeStreamLabel);
           errorMessage.classList.remove('hidden');
-          document.getElementById('sh-load-more-wrap').style.display = 'none';
+          document.getElementById('sh-load-more-wrap')?.classList.add('lm-hidden');
           return;
         }
         if (_visibleCount === 0) _visibleCount = _calcBatch();
@@ -1125,9 +1131,9 @@
         if (lmWrap && lmBtn) {
           if (streams.length > _visibleCount) {
             lmBtn.textContent = t('list.load_more');
-            lmWrap.style.display = '';
+            lmWrap.classList.remove('lm-hidden');
           } else {
-            lmWrap.style.display = 'none';
+            lmWrap.classList.add('lm-hidden');
           }
         }
       };
@@ -1139,6 +1145,7 @@
           activeStreamLabel = nextLabel;
           localStorage.setItem('home_stream_label', activeStreamLabel);
           streamList.classList.add('is-switching');
+          document.getElementById('sh-load-more-wrap')?.classList.add('lm-hidden');
           window.setTimeout(() => {
             _visibleCount = 0;
             renderStreams();