minor tweaks to download for degraded experience

prod doesn't use latest chakra, so the image loading is not smooth anymore... so we stopped using crossOrigin for the moment, which is awkward for Download

dev-todos.txt

@@ -1,4 +1,5 @@
 * Use accessible click targets for item lists! Honestly, can they be checkboxes?
 * Update skeletons for ItemList and ItemsPanel
 * Use react-virtualized instead of our own scroller, but we need total count known, and we need another solution for the CSS transitions in the outfit case
+* Restore good download behavior: use crossOrigin for everything, and remove cache-buster in the URL we use for canvas
 * Undo the local linking we did for @chakra-ui/core, react, and react-dom on Matchu's machine 😅

src/OutfitPreview.js

@@ -12,7 +12,6 @@ import {
   Spinner,
   Text,
   Tooltip,
-  useToast,
 } from "@chakra-ui/core";
 
 import { Delay } from "./util";
@@ -38,7 +37,6 @@ export const itemAppearanceFragment = gql`
 
 function OutfitPreview({ outfitState }) {
   const { wornItemIds, speciesId, colorId } = outfitState;
-  const toast = useToast();
 
   const { loading, error, data } = useQuery(
     gql`
@@ -99,7 +97,10 @@ function OutfitPreview({ outfitState }) {
                 className="outfit-preview-layer-image"
                 // This sets up the cache to not need to reload images during
                 // download!
-                crossOrigin="Anonymous"
+                // TODO: Re-enable this once we get our change into Chakra
+                // main. For now, this will make Downloads a bit slower, which
+                // is fine!
+                // crossOrigin="Anonymous"
               />
             </FullScreenCenter>
           </CSSTransition>
@@ -138,14 +139,7 @@ function OutfitPreview({ outfitState }) {
             download={(outfitState.name || "Outfit") + ".png"}
             onMouseEnter={prepareDownload}
             onFocus={prepareDownload}
-            onClick={() => {
-              if (!downloadImageUrl) {
-                toast({
-                  title:
-                    "Just a second, try again when the image is done loading!",
-                });
-              }
-            }}
+            cursor={!downloadImageUrl && "wait"}
             variant="unstyled"
             backgroundColor="gray.600"
             color="gray.50"
@@ -224,6 +218,8 @@ function useDownloadableImage(visibleLayers) {
   const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
 
   const prepareDownload = React.useCallback(async () => {
+    setDownloadImageUrl(null);
+
     // Skip if the current image URL is already correct for these layers.
     const layerIds = visibleLayers.map((l) => l.id);
     if (layerIds.join(",") === preparedForLayerIds.join(",")) {
@@ -237,7 +233,7 @@ function useDownloadableImage(visibleLayers) {
           image.crossOrigin = "Anonymous"; // Requires S3 CORS config!
           image.addEventListener("load", () => resolve(image), false);
           image.addEventListener("error", (e) => reject(e), false);
-          image.src = layer.imageUrl;
+          image.src = layer.imageUrl + "&xoxo";
         })
     );