Fix queue list crash: empty-state element destroyed by innerHTML

loadQueue() used getElementById('empty-state') on each call, but the
first successful render wiped it with innerHTML=''. Every subsequent
call got null and threw TypeError on .style access, silently killing
all future list refreshes. Counters kept working because updateStats()
runs independently.

Fix: recreate the empty state as innerHTML string instead of
referencing a DOM element that gets destroyed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-07 21:02:06 -06:00
parent 70562e1d2b
commit 5f354bb5fc

View File

@@ -401,7 +401,6 @@ Storage.init().then(() => {
async function loadQueue() { async function loadQueue() {
const queueList = document.getElementById('queue-list'); const queueList = document.getElementById('queue-list');
const emptyState = document.getElementById('empty-state');
const photos = await Storage.db.photos const photos = await Storage.db.photos
.where('username').equals(currentUsername) .where('username').equals(currentUsername)
@@ -413,21 +412,18 @@ async function loadQueue() {
const completedPhotos = photos.filter(p => const completedPhotos = photos.filter(p =>
p.status === 'verified' || p.status === 'failed'); p.status === 'verified' || p.status === 'failed');
if (photos.length === 0) {
emptyState.style.display = 'block';
queueList.innerHTML = '';
queueList.appendChild(emptyState);
document.getElementById('sync-now-btn').disabled = true;
return;
}
emptyState.style.display = 'none';
// Revoke old ObjectURLs before rebuilding to prevent memory leaks // Revoke old ObjectURLs before rebuilding to prevent memory leaks
queueList.querySelectorAll('img[src^="blob:"]').forEach(img => { queueList.querySelectorAll('img[src^="blob:"]').forEach(img => {
URL.revokeObjectURL(img.src); URL.revokeObjectURL(img.src);
}); });
queueList.innerHTML = ''; queueList.innerHTML = '';
if (photos.length === 0) {
queueList.innerHTML = '<p class="empty-state">No photos in queue</p>';
document.getElementById('sync-now-btn').disabled = true;
return;
}
// Show active uploads first (newest first) // Show active uploads first (newest first)
for (const photo of activePhotos.reverse()) { for (const photo of activePhotos.reverse()) {
queueList.appendChild(createQueueItem(photo, false)); queueList.appendChild(createQueueItem(photo, false));