fix item skeletons for new spacing

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 😅

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

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