include animated assets in preloading

Honestly kinda surprised this worked on the first go! I was worried something about the process would make the sorta like, instant-cache expectation not work.

Still thinking it might be considerate to like, keep a LRU cache of MovieClip options, so that we don't double-execute these scripts when adding stuff… we even re-execute the ones already applied lol 😅 and that adds lots of script tags to the body!

But yeah I'm not gonna push on it yet until I see evidence that it actually causes performance issues in practice

src/app/components/OutfitCanvas.js

@@ -241,7 +241,7 @@ export function OutfitCanvasMovie({ librarySrc, zIndex }) {
 
     async function addMovieClip() {
       try {
-        library = await loadMovieLibrary(librarySrc);
+        library = await loadCanvasMovieLibrary(librarySrc);
       } catch (e) {
         console.error("Error loading movie library", librarySrc, e);
         return;
@@ -414,7 +414,7 @@ export function loadImage(url) {
   return promise;
 }
 
-async function loadMovieLibrary(librarySrc) {
+export async function loadCanvasMovieLibrary(librarySrc) {
   // These library JS files are interesting in their operation. It seems like
   // the idea is, it pushes an object to a global array, and you need to snap
   // it up and see it at the end of the array! And I don't really see a way to

src/app/components/OutfitPreview.js

@@ -8,6 +8,7 @@ import OutfitCanvas, {
   OutfitCanvasImage,
   OutfitCanvasMovie,
   loadImage,
+  loadCanvasMovieLibrary,
   useEaselDependenciesLoader,
 } from "./OutfitCanvas";
 import HangerSpinner from "./HangerSpinner";
@@ -330,15 +331,21 @@ export function usePreloadLayers(layers) {
     let canceled = false;
     setError(null);
 
-    const loadImages = async () => {
+    const loadAssets = async () => {
-      const imagePromises = layers.map(getBestImageUrlForLayer).map(loadImage);
+      const assetPromises = layers.map((layer) => {
+        if (layer.canvasMovieLibraryUrl) {
+          return loadCanvasMovieLibrary(layer.canvasMovieLibraryUrl);
+        } else {
+          return loadImage(getBestImageUrlForLayer(layer));
+        }
+      });
       try {
         // TODO: Load in one at a time, under a loading spinner & delay?
-        await Promise.all(imagePromises);
+        await Promise.all(assetPromises);
       } catch (e) {
         if (canceled) return;
         console.error("Error preloading outfit layers", e);
-        imagePromises.forEach((p) => p.cancel());
+        assetPromises.forEach((p) => p.cancel());
         setError(e);
         return;
       }
@@ -347,7 +354,7 @@ export function usePreloadLayers(layers) {
       setLoadedLayers(layers);
     };
 
-    loadImages();
+    loadAssets();
 
     return () => {
       canceled = true;