diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js index 55508a0..d4f7dde 100644 --- a/src/app/components/OutfitPreview.js +++ b/src/app/components/OutfitPreview.js @@ -380,10 +380,7 @@ export function usePreloadLayers(layers) { for (const layer of layers) { const imageAssetPromise = loadImage( getBestImageUrlForLayer(layer, { hiResMode }) - ).then((image) => ({ - type: "image", - image, - })); + ); imageAssetPromises.push(imageAssetPromise); if (layer.canvasMovieLibraryUrl) { @@ -393,7 +390,6 @@ export function usePreloadLayers(layers) { const movieAssetPromise = loadMovieLibrary( layer.canvasMovieLibraryUrl ).then((library) => ({ - type: "movie", library, libraryUrl: layer.canvasMovieLibraryUrl, })); @@ -422,7 +418,7 @@ export function usePreloadLayers(layers) { setError(e); // Cancel any remaining promises, if cancelable. - minimalAssetPromises.forEach((p) => p.cancel && p.cancel()); + imageAssetPromises.forEach((p) => p.cancel && p.cancel()); movieAssetPromises.forEach((p) => p.cancel && p.cancel()); }); diff --git a/src/app/util.js b/src/app/util.js index b0841f6..d4842fc 100644 --- a/src/app/util.js +++ b/src/app/util.js @@ -355,10 +355,16 @@ export function useLocalStorage(key, initialValue) { export function loadImage(rawSrc, { crossOrigin = null } = {}) { const src = safeImageUrl(rawSrc, { crossOrigin }); const image = new Image(); + let canceled = false; const promise = new Promise((resolve, reject) => { - image.onload = () => resolve(image); - image.onerror = () => + image.onload = () => { + if (canceled) return; + resolve(image); + }; + image.onerror = () => { + if (canceled) return; reject(new Error(`Failed to load image: ${JSON.stringify(src)}`)); + }; if (crossOrigin) { image.crossOrigin = crossOrigin; } @@ -366,6 +372,7 @@ export function loadImage(rawSrc, { crossOrigin = null } = {}) { }); promise.cancel = () => { image.src = ""; + canceled = true; }; return promise; }