From 66b0314990c0879edff964bd5845b930afcdd392 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Fri, 24 Apr 2020 20:28:40 -0700
Subject: [PATCH] preload preview data for closeted items

---
 src/OutfitPreview.js | 44 ++++++++++++++++++++------------------------
 src/useItemData.js   | 10 ++++++++--
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js
index dce292c..e77e8d5 100644
--- a/src/OutfitPreview.js
+++ b/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 {
-            id
-            imageUrl(size: SIZE_600)
-            zone {
-              id
-              depth
-            }
-          }
-
-          restrictedZones {
-            id
-          }
+          ...AppearanceForOutfitPreview
         }
 
         items(ids: $wornItemIds) {
           id
           appearanceOn(speciesId: $speciesId, colorId: $colorId) {
-            layers {
-              id
-              imageUrl(size: SIZE_600)
-              zone {
-                id
-                depth
-              }
-            }
-
-            restrictedZones {
-              id
-            }
+            ...AppearanceForOutfitPreview
           }
         }
       }
+      ${itemAppearanceFragment}
     `,
     {
       variables: { wornItemIds, speciesId, colorId },
diff --git a/src/useItemData.js b/src/useItemData.js
index a9c1b79..a2dbdff 100644
--- a/src/useItemData.js
+++ b/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 } }
   );