From 612cf914e0e65acd24212d7ead189758139af142 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 1 Feb 2024 08:55:42 -0800
Subject: [PATCH] Skip rendering layers without a usable image

This happens on the Baby Kougra, where for most poses half of the
assets have a manifest that includes an SVG but no PNG. Skip 'em!

I considered adding a glitch tag for this, but idk I think we can do
that once we're aware of an actual case where this causes visible
issues.
---
 .../wardrobe-2020/components/OutfitPreview.js | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/javascript/wardrobe-2020/components/OutfitPreview.js b/app/javascript/wardrobe-2020/components/OutfitPreview.js
index 9a781420..2e138025 100644
--- a/app/javascript/wardrobe-2020/components/OutfitPreview.js
+++ b/app/javascript/wardrobe-2020/components/OutfitPreview.js
@@ -215,6 +215,10 @@ export function OutfitLayers({
     return () => window.removeEventListener("resize", computeAndSaveCanvasSize);
   }, [setCanvasSize]);
 
+  const layersWithAssets = visibleLayers.filter((l) =>
+    layerHasUsableAssets(l, { hiResMode }),
+  );
+
   return (
     <ClassNames>
       {({ css }) => (
@@ -247,7 +251,7 @@ export function OutfitLayers({
             </FullScreenCenter>
           )}
           <TransitionGroup enter={false} exit={doTransitions}>
-            {visibleLayers.map((layer) => (
+            {layersWithAssets.map((layer) => (
               <CSSTransition
                 // We manage the fade-in and fade-out separately! The fade-out
                 // happens here, when the layer exits the DOM.
@@ -359,11 +363,17 @@ export function FullScreenCenter({ children, ...otherProps }) {
 export function getBestImageUrlForLayer(layer, { hiResMode = false } = {}) {
   if (hiResMode && layer.svgUrl) {
     return layer.svgUrl;
-  } else {
+  } else if (layer.imageUrl) {
     return layer.imageUrl;
+  } else {
+    return null;
   }
 }
 
+function layerHasUsableAssets(layer, options = {}) {
+  return getBestImageUrlForLayer(layer, options) != null;
+}
+
 /**
  * usePreloadLayers preloads the images for the given layers, and yields them
  * when done. This enables us to keep the old outfit preview on screen until
@@ -397,11 +407,12 @@ export function usePreloadLayers(layers) {
     const imageAssetPromises = [];
     const movieAssetPromises = [];
     for (const layer of layers) {
-      const imageAssetPromise = loadImage(
-        getBestImageUrlForLayer(layer, { hiResMode }),
-        { preferArchive },
-      );
-      imageAssetPromises.push(imageAssetPromise);
+      const imageUrl = getBestImageUrlForLayer(layer, { hiResMode });
+      const imageAssetPromise =
+        imageUrl != null ? loadImage(imageUrl, { preferArchive }) : null;
+      if (imageAssetPromise != null) {
+        imageAssetPromises.push(imageAssetPromise);
+      }
 
       if (layer.canvasMovieLibraryUrl) {
         // Start preloading the movie. But we won't block on it! The blocking
@@ -424,8 +435,12 @@ export function usePreloadLayers(layers) {
         minimalAssetPromises.push(
           Promise.any([imageAssetPromise, movieAssetPromise]),
         );
-      } else {
+      } else if (imageAssetPromise != null) {
         minimalAssetPromises.push(imageAssetPromise);
+      } else {
+        console.warn(
+          `Skipping preloading layer ${layer.id}: no asset URLs found`,
+        );
       }
     }