preload preview data for closeted items

src/OutfitPreview.js

@@ -8,6 +8,23 @@ import { Delay } from "./util";
 
 import "./OutfitPreview.css";
 
+export const itemAppearanceFragment = gql`
+  fragment AppearanceForOutfitPreview on Appearance {
+    layers {
+      id
+      imageUrl(size: SIZE_600)
+      zone {
+        id
+        depth
+      }
+    }
+
+    restrictedZones {
+      id
+    }
+  }
+`;
+
 function OutfitPreview({ outfitState }) {
   const { wornItemIds, speciesId, colorId } = outfitState;
 
@@ -15,38 +32,17 @@ function OutfitPreview({ outfitState }) {
     gql`
       query($wornItemIds: [ID!]!, $speciesId: ID!, $colorId: ID!) {
         petAppearance(speciesId: $speciesId, colorId: $colorId) {
-          layers {
+          ...AppearanceForOutfitPreview
-            id
-            imageUrl(size: SIZE_600)
-            zone {
-              id
-              depth
-            }
-          }
-
-          restrictedZones {
-            id
-          }
         }
 
         items(ids: $wornItemIds) {
           id
           appearanceOn(speciesId: $speciesId, colorId: $colorId) {
-            layers {
+            ...AppearanceForOutfitPreview
-              id
-              imageUrl(size: SIZE_600)
-              zone {
-                id
-                depth
-              }
-            }
-
-            restrictedZones {
-              id
-            }
           }
         }
       }
+      ${itemAppearanceFragment}
     `,
     {
       variables: { wornItemIds, speciesId, colorId },

src/useItemData.js

@@ -1,6 +1,8 @@
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/react-hooks";
 
+import { itemAppearanceFragment } from "./OutfitPreview";
+
 function useItemData(itemIds, speciesId, colorId) {
   const { loading, error, data } = useQuery(
     gql`
@@ -10,9 +12,12 @@ function useItemData(itemIds, speciesId, colorId) {
           name
           thumbnailUrl
 
-          # This is used to group items by zone, and to detect conflicts when
-          # wearing a new item.
           appearanceOn(speciesId: $speciesId, colorId: $colorId) {
+            # This enables us to quickly show the item when the user clicks it!
+            ...AppearanceForOutfitPreview
+
+            # This is used to group items by zone, and to detect conflicts when
+            # wearing a new item.
             layers {
               zone {
                 id
@@ -22,6 +27,7 @@ function useItemData(itemIds, speciesId, colorId) {
           }
         }
       }
+      ${itemAppearanceFragment}
     `,
     { variables: { itemIds, speciesId, colorId } }
   );