From 846b26f4c5b491736bfaae357e1c9de6ccd85b11 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Fri, 24 Apr 2020 21:23:03 -0700
Subject: [PATCH] add more items to skeleton for search

---
 src/ItemList.js     | 16 ++++++----------
 src/SearchPanel.js  |  2 +-
 src/WardrobePage.js |  2 +-
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/ItemList.js b/src/ItemList.js
index b763075..7080802 100644
--- a/src/ItemList.js
+++ b/src/ItemList.js
@@ -17,18 +17,14 @@ function ItemList({ items, wornItemIds, dispatchToOutfit }) {
   );
 }
 
-function ItemListSkeleton() {
+function ItemListSkeleton({ count }) {
   return (
     <Stack spacing="3">
-      <Box>
-        <ItemSkeleton />
-      </Box>
-      <Box>
-        <ItemSkeleton />
-      </Box>
-      <Box>
-        <ItemSkeleton />
-      </Box>
+      {Array.from({ length: count }).map((_, i) => (
+        <Box key={i}>
+          <ItemSkeleton />
+        </Box>
+      ))}
     </Stack>
   );
 }
diff --git a/src/SearchPanel.js b/src/SearchPanel.js
index 9a36815..b47332f 100644
--- a/src/SearchPanel.js
+++ b/src/SearchPanel.js
@@ -60,7 +60,7 @@ function SearchResults({ query, outfitState, dispatchToOutfit }) {
   if (loading || variables.query !== query) {
     return (
       <Delay ms={500}>
-        <ItemListSkeleton />
+        <ItemListSkeleton count={8} />
       </Delay>
     );
   }
diff --git a/src/WardrobePage.js b/src/WardrobePage.js
index 2689d8f..3109b61 100644
--- a/src/WardrobePage.js
+++ b/src/WardrobePage.js
@@ -141,7 +141,7 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
             <Box key={i}>
               <Delay>
                 <Skeleton height="2.3rem" width="12rem" mb="3" />
-                <ItemListSkeleton />
+                <ItemListSkeleton count={3} />
               </Delay>
             </Box>
           ))}