add item list skeleton while loading

src/ItemList.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Image, PseudoBox, Stack } from "@chakra-ui/core";
+import { Box, Image, PseudoBox, Stack, Skeleton } from "@chakra-ui/core";
 
 function ItemList({ items, wornItemIds, onWearItem }) {
   return (
@@ -17,6 +17,22 @@ function ItemList({ items, wornItemIds, onWearItem }) {
   );
 }
 
+function ItemListSkeleton() {
+  return (
+    <Stack spacing="3">
+      <Box>
+        <ItemSkeleton />
+      </Box>
+      <Box>
+        <ItemSkeleton />
+      </Box>
+      <Box>
+        <ItemSkeleton />
+      </Box>
+    </Stack>
+  );
+}
+
 function Item({ item, isWorn, onWear }) {
   return (
     <PseudoBox
@@ -33,6 +49,16 @@ function Item({ item, isWorn, onWear }) {
   );
 }
 
+function ItemSkeleton() {
+  return (
+    <Box d="flex" alignItems="center">
+      <Skeleton width="50px" height="50px" />
+      <Box width="3" />
+      <Skeleton height="1.5rem" width="12rem" />
+    </Box>
+  );
+}
+
 function ItemThumbnail({ src, isWorn }) {
   return (
     <PseudoBox
@@ -82,3 +108,4 @@ function ItemName({ children, isWorn }) {
 }
 
 export default ItemList;
+export { ItemListSkeleton };

src/WardrobePage.js

@@ -15,12 +15,13 @@ import {
   InputLeftElement,
   InputRightElement,
   PseudoBox,
+  Skeleton,
   Stack,
   Text,
   useToast,
 } from "@chakra-ui/core";
 
-import ItemList from "./ItemList";
+import ItemList, { ItemListSkeleton } from "./ItemList";
 import useOutfitState from "./useOutfitState.js";
 import { ITEMS } from "./data";
 
@@ -53,6 +54,18 @@ function WardrobePage() {
     [toast, wearItem, hasSentToast, setHasSentToast]
   );
 
+  React.useEffect(() => {
+    if (error) {
+      toast({
+        title: "We couldn't load this outfit 😖",
+        description: "Please reload the page to try again. Sorry!",
+        status: "error",
+        isClosable: true,
+        duration: Infinity,
+      });
+    }
+  }, [error, toast]);
+
   return (
     <Grid
       // Fullscreen, split into a vertical stack on smaller screens
@@ -97,6 +110,7 @@ function WardrobePage() {
           ) : (
             <ItemsPanel
               zonesAndItems={data.zonesAndItems}
+              loading={loading}
               onWearItem={wearItemAndToast}
             />
           )}
@@ -191,12 +205,20 @@ function SearchPanel({ query, wornItemIds, onWearItem }) {
   );
 }
 
-function ItemsPanel({ zonesAndItems, onWearItem }) {
+function ItemsPanel({ zonesAndItems, loading, onWearItem }) {
   return (
     <Box color="green.800">
       <OutfitHeading />
       <Stack spacing="10">
-        {zonesAndItems.map(({ zoneName, items, wornItemId }) => (
+        {loading &&
+          [1, 2, 3].map((i) => (
+            <Box key={i}>
+              <Skeleton height="2.3rem" width="12rem" mb="3" />
+              <ItemListSkeleton />
+            </Box>
+          ))}
+        {!loading &&
+          zonesAndItems.map(({ zoneName, items, wornItemId }) => (
             <Box key={zoneName}>
               <Heading2 mb="3">{zoneName}</Heading2>
               <ItemList
@@ -213,6 +235,7 @@ function ItemsPanel({ zonesAndItems, onWearItem }) {
 
 function OutfitHeading() {
   return (
+    <Box>
       <PseudoBox role="group" d="inline-block" position="relative">
         <Heading1 mb="6">
           <Editable defaultValue="Zafara Agent (roopal27)">
@@ -228,6 +251,7 @@ function OutfitHeading() {
           </Editable>
         </Heading1>
       </PseudoBox>
+    </Box>
   );
 }