OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Oops, fix a perf regression in Hi-Res Mode!

Browse source 
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.
This commit is contained in:
Emi Matchu 2021-06-11 05:52:53 -07:00
parent 2375669cdf
commit 07bf555a02
1 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/components/OutfitPreview.js
View file

@ -325,6 +325,8 @@ export function getBestImageUrlForLayer(layer, { hiResMode = false } = {}) {
* all the new layers are ready, then show them all at once! * all the new layers are ready, then show them all at once!
*/ */
export function usePreloadLayers(layers) { export function usePreloadLayers(layers) {
const [hiResMode] = useLocalStorage("DTIHiResMode", false);
const [error, setError] = React.useState(null); const [error, setError] = React.useState(null);
const [loadedLayers, setLoadedLayers] = React.useState([]); const [loadedLayers, setLoadedLayers] = React.useState([]);
const [layersHaveAnimations, setLayersHaveAnimations] = React.useState(false); const [layersHaveAnimations, setLayersHaveAnimations] = React.useState(false);
@ -360,10 +362,12 @@ export function usePreloadLayers(layers) {
}) })
); );
} else { } else {
return loadImage(getBestImageUrlForLayer(layer)).then((image) => ({ return loadImage(getBestImageUrlForLayer(layer, { hiResMode })).then(
type: "image", (image) => ({
image, type: "image",
})); image,
})
);
} }
}); });
@ -404,7 +408,7 @@ export function usePreloadLayers(layers) {
return () => { return () => {
canceled = true; canceled = true;
}; };
}, [layers, loadedLayers.length, loading]); }, [layers, loadedLayers.length, loading, hiResMode]);
return { loading, error, loadedLayers, layersHaveAnimations }; return { loading, error, loadedLayers, layersHaveAnimations };
} }