diff --git a/eslint.config.mjs b/eslint.config.mjs index cd9ee3251..6afd37a0f 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -99,6 +99,7 @@ const jsConfig = defineConfig([ idbAdd: 'readonly', idbCount: 'readonly', idbFolderCleanup: 'readonly', + idbIsReady: 'readonly', initChangelog: 'readonly', sendNotification: 'readonly', monitorConnection: 'readonly', diff --git a/javascript/gallery.js b/javascript/gallery.js index f5d135282..4bebc3b1a 100644 --- a/javascript/gallery.js +++ b/javascript/gallery.js @@ -1212,6 +1212,22 @@ async function setOverlayAnimation() { document.head.append(busyAnimation); } +async function blockQueueUntilReady() { + // Add block to maintenanceQueue until cache is ready + maintenanceQueue.enqueue({ + signal: new AbortSignal(), // Use standalone AbortSignal that can't be aborted + callback: async () => { + let timeout = 0; + while (!idbIsReady() && timeout++ < 60) { + await new Promise((resolve) => { setTimeout(resolve, 1000); }); + } + if (!idbIsReady()) { + throw new Error('Timed out waiting for thumbnail cache'); + } + }, + }); +} + async function initGallery() { // triggered on gradio change to monitor when ui gets sufficiently constructed log('initGallery'); el.folders = gradioApp().getElementById('tab-gallery-folders'); @@ -1222,6 +1238,8 @@ async function initGallery() { // triggered on gradio change to monitor when ui error('initGallery', 'Missing gallery elements'); return; } + + blockQueueUntilReady(); // Run first updateGalleryStyles(); injectGalleryStatusCSS(); setOverlayAnimation(); diff --git a/javascript/indexdb.js b/javascript/indexdb.js index 17d79b93b..1998597d8 100644 --- a/javascript/indexdb.js +++ b/javascript/indexdb.js @@ -36,6 +36,10 @@ async function initIndexDB() { if (!db) await createDB(); } +function idbIsReady() { + return db !== null; +} + /** * Reusable setup for handling IDB transactions. * @param {Object} resources - Required resources for implementation