From 9c9a2662a001c937a9bbe3bf061d28b8993a8953 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 25 Apr 2020 03:05:26 -0700
Subject: [PATCH] fix item skeletons for new spacing

---
 dev-todos.txt     | 1 -
 src/ItemList.js   | 6 +++---
 src/ItemsPanel.js | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/dev-todos.txt b/dev-todos.txt
index e4ed8a1..68cfe5e 100644
--- a/dev-todos.txt
+++ b/dev-todos.txt
@@ -1,5 +1,4 @@
 * 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 😅
diff --git a/src/ItemList.js b/src/ItemList.js
index 3412f52..7ad9b06 100644
--- a/src/ItemList.js
+++ b/src/ItemList.js
@@ -42,13 +42,13 @@ function ItemList({ items, outfitState, dispatchToOutfit }) {
 
 function ItemListSkeleton({ count }) {
   return (
-    <Stack spacing="3">
+    <Flex direction="column">
       {Array.from({ length: count }).map((_, i) => (
-        <Box key={i}>
+        <Box key={i} mb="2" mt="2">
           <ItemSkeleton />
         </Box>
       ))}
-    </Stack>
+    </Flex>
   );
 }
 
diff --git a/src/ItemsPanel.js b/src/ItemsPanel.js
index dc9cc4c..88c1213 100644
--- a/src/ItemsPanel.js
+++ b/src/ItemsPanel.js
@@ -28,7 +28,7 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
       <Flex direction="column">
         {loading &&
           [1, 2, 3].map((i) => (
-            <Box key={i}>
+            <Box key={i} mb="10">
               <Delay>
                 <Skeleton height="2.3rem" width="12rem" />
                 <ItemListSkeleton count={3} />