From 07bf555a02b73537af744390260d2761aa8fbd82 Mon Sep 17 00:00:00 2001 From: Matchu Date: Fri, 11 Jun 2021 05:52:53 -0700 Subject: [PATCH] Oops, fix a perf regression in Hi-Res Mode! Ah oops, because I forgot to set `hiResMode` here in the image preloader, we would preload the PNG, and _then_ load the SVG separately. This doubled the effective image loading time in Hi-Res Mode! Now, the image preloader respects hi-res mode, and will preload the SVG in the SVG case, and the PNG in the PNG case. --- src/app/components/OutfitPreview.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js index d964ee7..5198c1b 100644 --- a/src/app/components/OutfitPreview.js +++ b/src/app/components/OutfitPreview.js @@ -325,6 +325,8 @@ export function getBestImageUrlForLayer(layer, { hiResMode = false } = {}) { * all the new layers are ready, then show them all at once! */ export function usePreloadLayers(layers) { + const [hiResMode] = useLocalStorage("DTIHiResMode", false); + const [error, setError] = React.useState(null); const [loadedLayers, setLoadedLayers] = React.useState([]); const [layersHaveAnimations, setLayersHaveAnimations] = React.useState(false); @@ -360,10 +362,12 @@ export function usePreloadLayers(layers) { }) ); } else { - return loadImage(getBestImageUrlForLayer(layer)).then((image) => ({ - type: "image", - image, - })); + return loadImage(getBestImageUrlForLayer(layer, { hiResMode })).then( + (image) => ({ + type: "image", + image, + }) + ); } }); @@ -404,7 +408,7 @@ export function usePreloadLayers(layers) { return () => { canceled = true; }; - }, [layers, loadedLayers.length, loading]); + }, [layers, loadedLayers.length, loading, hiResMode]); return { loading, error, loadedLayers, layersHaveAnimations }; }