diff --git a/src/services/AudioLoader.ts b/src/services/AudioLoader.ts index 945e222..28b86a9 100644 --- a/src/services/AudioLoader.ts +++ b/src/services/AudioLoader.ts @@ -1,9 +1,13 @@ /** * Global audio loading queue service to prevent hitting browser connection limits + * Will yield to image loading if images are queued */ +import { hasQueuedImages } from "./ImageLoader"; + // Configuration const MAX_CONCURRENT_LOADS = 1; +const RETRY_DELAY_MS = 200; // Time to wait before retrying if yielding to images // State let activeLoads = 0; @@ -82,6 +86,14 @@ export function queueAudioForLoading( * Process the next items in the queue if we have capacity */ function processQueue() { + // Check if there are any images being loaded or queued - yield to them if so + if (hasQueuedImages()) { + console.debug("[AudioLoader] Yielding to image loader, will retry later"); + // Schedule a retry after a short delay + setTimeout(processQueue, RETRY_DELAY_MS); + return; + } + // Group queue items by src to avoid duplicate loads const nextBatch: Record< string, @@ -119,6 +131,12 @@ function processQueue() { Object.entries(nextBatch).forEach(([src, handlers]) => { loadAudio(src, handlers); }); + + // If we have more items in the queue but didn't process them due to capacity limits, + // and no images are queued, schedule another processQueue call to check again soon + if (audioQueue.length > 0 && !hasQueuedImages()) { + setTimeout(processQueue, RETRY_DELAY_MS); + } } /** diff --git a/src/services/ImageLoader.ts b/src/services/ImageLoader.ts index 6c7dddd..e8e8e47 100644 --- a/src/services/ImageLoader.ts +++ b/src/services/ImageLoader.ts @@ -12,6 +12,14 @@ const imageQueue: Array<{ onComplete: () => void; }> = []; +/** + * Check if there are any images queued or actively loading + * Used by other loaders to prioritize image loading + */ +export function hasQueuedImages(): boolean { + return imageQueue.length > 0 || activeLoads > 0; +} + /** * Queue an image for loading, respecting the global concurrent loading limit */