kqjy/MyFSIO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Fix empty UI on large bucket first load: keep loading row during streaming, add progress indicator, throttle renders

Browse Source
This commit is contained in:
kqjy
2026-02-09 19:29:50 +08:00
parent aa6d7c4d28
commit 4ecd32a554
1 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
static/js/bucket-detail-main.js
View File

@@ -516,6 +516,9 @@
}; };
}; };
let lastStreamRenderTime = 0;
const STREAM_RENDER_THROTTLE_MS = 500;
const flushPendingStreamObjects = () => { const flushPendingStreamObjects = () => {
if (pendingStreamObjects.length === 0) return; if (pendingStreamObjects.length === 0) return;
const batch = pendingStreamObjects.splice(0, pendingStreamObjects.length); const batch = pendingStreamObjects.splice(0, pendingStreamObjects.length);
@@ -532,6 +535,19 @@
loadMoreStatus.textContent = `${loadedObjectCount.toLocaleString()}${countText} loading...`; loadMoreStatus.textContent = `${loadedObjectCount.toLocaleString()}${countText} loading...`;
} }
} }
if (objectsLoadingRow && objectsLoadingRow.parentNode) {
const loadingText = objectsLoadingRow.querySelector('p');
if (loadingText) {
const countText = totalObjectCount > 0 ? ` of ${totalObjectCount.toLocaleString()}` : '';
loadingText.textContent = `Loading ${loadedObjectCount.toLocaleString()}${countText} objects...`;
}
}
const now = performance.now();
if (!streamingComplete && now - lastStreamRenderTime < STREAM_RENDER_THROTTLE_MS) {
streamRenderScheduled = false;
return;
}
lastStreamRenderTime = now;
refreshVirtualList(); refreshVirtualList();
streamRenderScheduled = false; streamRenderScheduled = false;
}; };
@@ -555,6 +571,7 @@
memoizedVisibleItems = null; memoizedVisibleItems = null;
memoizedInputs = { objectCount: -1, prefix: null, filterTerm: null }; memoizedInputs = { objectCount: -1, prefix: null, filterTerm: null };
pendingStreamObjects = []; pendingStreamObjects = [];
lastStreamRenderTime = 0;
streamAbortController = new AbortController(); streamAbortController = new AbortController();
@@ -569,7 +586,10 @@
throw new Error(`HTTP ${response.status}`); throw new Error(`HTTP ${response.status}`);
} }
if (objectsLoadingRow) objectsLoadingRow.remove(); if (objectsLoadingRow) {
const loadingText = objectsLoadingRow.querySelector('p');
if (loadingText) loadingText.textContent = 'Receiving objects...';
}
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder(); const decoder = new TextDecoder();
@@ -597,6 +617,10 @@
break; break;
case 'count': case 'count':
totalObjectCount = msg.total_count || 0; totalObjectCount = msg.total_count || 0;
if (objectsLoadingRow) {
const loadingText = objectsLoadingRow.querySelector('p');
if (loadingText) loadingText.textContent = `Loading 0 of ${totalObjectCount.toLocaleString()} objects...`;
}
break; break;
case 'object': case 'object':
pendingStreamObjects.push(processStreamObject(msg)); pendingStreamObjects.push(processStreamObject(msg));
@@ -630,11 +654,15 @@
} catch (e) { } } catch (e) { }
} }
flushPendingStreamObjects();
streamingComplete = true; streamingComplete = true;
flushPendingStreamObjects();
hasMoreObjects = false; hasMoreObjects = false;
updateObjectCountBadge(); updateObjectCountBadge();
if (objectsLoadingRow && objectsLoadingRow.parentNode) {
objectsLoadingRow.remove();
}
if (loadMoreStatus) { if (loadMoreStatus) {
loadMoreStatus.textContent = `${loadedObjectCount.toLocaleString()} objects`; loadMoreStatus.textContent = `${loadedObjectCount.toLocaleString()} objects`;
} }