add more items to skeleton for search

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>
   );
 }

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>
     );
   }

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>
           ))}