From eff3e378f34c70a413b75bc75f0cf1333fb2c6ab Mon Sep 17 00:00:00 2001
From: kqjy <jun@jzwsite.com>
Date: Mon, 23 Mar 2026 11:55:46 +0800
Subject: [PATCH] Fix mobile infinite scroll on object list and ghost preview
 on fast object swap

---
 static/css/main.css             |  2 +-
 static/js/bucket-detail-main.js | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 5202aab..2a54ee0 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2655,7 +2655,7 @@ pre code {
 	}
 	
 	.objects-table-container {
-		max-height: none;
+		max-height: 60vh;
 	}
 	
 	.preview-card {
diff --git a/static/js/bucket-detail-main.js b/static/js/bucket-detail-main.js
index 90517fe..2648ec3 100644
--- a/static/js/bucket-detail-main.js
+++ b/static/js/bucket-detail-main.js
@@ -98,6 +98,7 @@
   const previewMetadata = document.getElementById('preview-metadata');
   const previewMetadataList = document.getElementById('preview-metadata-list');
   const previewPlaceholder = document.getElementById('preview-placeholder');
+  const previewPlaceholderDefault = previewPlaceholder ? previewPlaceholder.innerHTML : '';
   const previewImage = document.getElementById('preview-image');
   const previewVideo = document.getElementById('preview-video');
   const previewAudio = document.getElementById('preview-audio');
@@ -1957,6 +1958,10 @@
     [previewImage, previewVideo, previewAudio, previewIframe].forEach((el) => {
       if (!el) return;
       el.classList.add('d-none');
+      if (el.tagName === 'IMG') {
+        el.removeAttribute('src');
+        el.onload = null;
+      }
       if (el.tagName === 'VIDEO' || el.tagName === 'AUDIO') {
         el.pause();
         el.removeAttribute('src');
@@ -1969,6 +1974,7 @@
       previewText.classList.add('d-none');
       previewText.textContent = '';
     }
+    previewPlaceholder.innerHTML = previewPlaceholderDefault;
     previewPlaceholder.classList.remove('d-none');
   };
 
@@ -2016,9 +2022,18 @@
     const previewUrl = row.dataset.previewUrl;
     const lower = row.dataset.key.toLowerCase();
     if (previewUrl && lower.match(/\.(png|jpg|jpeg|gif|webp|svg|ico|bmp)$/)) {
+      previewPlaceholder.innerHTML = '<div class="spinner-border spinner-border-sm text-secondary" role="status"></div><div class="small mt-2">Loading preview\u2026</div>';
+      const currentRow = row;
+      previewImage.onload = () => {
+        if (activeRow !== currentRow) return;
+        previewImage.classList.remove('d-none');
+        previewPlaceholder.classList.add('d-none');
+      };
+      previewImage.onerror = () => {
+        if (activeRow !== currentRow) return;
+        previewPlaceholder.innerHTML = '<div class="small text-muted">Failed to load preview</div>';
+      };
       previewImage.src = previewUrl;
-      previewImage.classList.remove('d-none');
-      previewPlaceholder.classList.add('d-none');
     } else if (previewUrl && lower.match(/\.(mp4|webm|ogv|mov|avi|mkv)$/)) {
       previewVideo.src = previewUrl;
       previewVideo.classList.remove('d-none');