From d29abf5cd13201ea296c4db88b9c2a41a4108923 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 12 Sep 2020 18:13:11 -0700
Subject: [PATCH] add skeletons for item page header

It looks nice, but also particularly means we can handle the loading for the preview separately, get that started faster and iterate better on it in dev!
---
 src/app/ItemPage.js            | 65 ++++++++++++++++++++++++++--------
 src/app/components/ItemCard.js |  8 +++--
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 8dd58d0..295e174 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -3,7 +3,7 @@ import {
   AspectRatio,
   Badge,
   Box,
-  Center,
+  Skeleton,
   VStack,
   useColorModeValue,
 } from "@chakra-ui/core";
@@ -25,6 +25,15 @@ import OutfitPreview from "./components/OutfitPreview";
 function ItemPage() {
   const { itemId } = useParams();
 
+  return (
+    <VStack spacing="6">
+      <ItemPageHeader itemId={itemId} />
+      <ItemPageOutfitPreview itemId={itemId} />
+    </VStack>
+  );
+}
+
+function ItemPageHeader({ itemId }) {
   const { loading, error, data } = useQuery(
     gql`
       query ItemPage($itemId: ID!) {
@@ -43,9 +52,41 @@ function ItemPage() {
 
   if (loading) {
     return (
-      <Center>
-        <HangerSpinner />
-      </Center>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="flex-start"
+        width="100%"
+      >
+        <Skeleton height="80px" width="80px" marginRight="4" flex="0 0 auto" />
+        <Box display="flex" flexDirection="column" alignItems="flex-start">
+          <Skeleton>
+            <Heading1 lineHeight="1.1" maxHeight="1.1em">
+              Item name goes here
+            </Heading1>
+          </Skeleton>
+          <ItemBadgeList>
+            <Skeleton>
+              <NpBadge />
+            </Skeleton>
+            <Skeleton>
+              <LinkBadge href="/">Jellyneo</LinkBadge>
+            </Skeleton>
+            <Skeleton>
+              <LinkBadge href="/">Shop Wiz</LinkBadge>
+            </Skeleton>
+            <Skeleton>
+              <LinkBadge href="/">Super Wiz</LinkBadge>
+            </Skeleton>
+            <Skeleton>
+              <LinkBadge href="/">Trades</LinkBadge>
+            </Skeleton>
+            <Skeleton>
+              <LinkBadge href="/">Auctions</LinkBadge>
+            </Skeleton>
+          </ItemBadgeList>
+        </Box>
+      </Box>
     );
   }
 
@@ -56,16 +97,12 @@ function ItemPage() {
   const { item } = data;
 
   return (
-    <VStack spacing="6">
-      <ItemPageHeader item={item} />
-      <ItemPageOutfitPreview itemId={itemId} />
-    </VStack>
-  );
-}
-
-function ItemPageHeader({ item }) {
-  return (
-    <Box display="flex" alignItems="center">
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="flex-start"
+      width="100%"
+    >
       <ItemThumbnail
         item={item}
         size="lg"
diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js
index 6a57f4e..37fef9b 100644
--- a/src/app/components/ItemCard.js
+++ b/src/app/components/ItemCard.js
@@ -220,15 +220,19 @@ export function ItemBadgeTooltip({ label, children }) {
 export function NcBadge() {
   return (
     <ItemBadgeTooltip label="Neocash">
-      <Badge colorScheme="purple">NC</Badge>
+      <Badge colorScheme="purple" display="block">
+        NC
+      </Badge>
     </ItemBadgeTooltip>
   );
 }
 
 export function NpBadge() {
+  // NOTE: display:block helps with some layout consistency, overriding the
+  //       default of inline-block.
   return (
     <ItemBadgeTooltip label="Neopoints">
-      <Badge>NP</Badge>
+      <Badge display="block">NP</Badge>
     </ItemBadgeTooltip>
   );
 }