From 2a5ecb688a3c958d544e3349929be91f168081fc Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 11 Jul 2021 18:16:57 -0700
Subject: [PATCH] Improve homepage modeling loading state

Add a skeleton stripe for the modeling data! Won't show up in most cases because we load fast, but it helps things a lot when it does. (Also, will we keep loading fast with the cache changes on this query?)
---
 src/app/HomePage.js                  | 41 ++++++++++++++++------------
 src/app/components/SquareItemCard.js |  6 +++-
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 43f2186..67888b9 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -4,6 +4,7 @@ import gql from "graphql-tag";
 import {
   Box,
   Button,
+  Center,
   Flex,
   HStack,
   IconButton,
@@ -13,6 +14,7 @@ import {
   InputRightElement,
   Link,
   ListItem,
+  Skeleton,
   Textarea,
   UnorderedList,
   useColorModeValue,
@@ -406,7 +408,11 @@ function NewItemsSectionContent() {
   );
 
   if (loading) {
-    const footer = <Box fontSize="xs" height="1em" />;
+    const footer = (
+      <Center fontSize="xs" height="1.5em">
+        <Skeleton height="4px" width="100%" />
+      </Center>
+    );
     return (
       <Delay>
         <ItemCardHStack>
@@ -456,28 +462,29 @@ function NewItemsSectionContent() {
         <SquareItemCard
           key={item.id}
           item={item}
-          footer={
-            item.speciesThatNeedModels.length > 0 ? (
-              <Box
-                fontSize="xs"
-                fontStyle="italic"
-                fontWeight="600"
-                opacity="0.8"
-              >
-                Need {item.speciesThatNeedModels.length}1 models
-              </Box>
-            ) : (
-              <Box fontSize="xs" fontStyle="italic" opacity="0.8">
-                Fully modeled!
-              </Box>
-            )
-          }
+          footer={<ItemModelingSummary item={item} />}
         />
       ))}
     </ItemCardHStack>
   );
 }
 
+function ItemModelingSummary({ item }) {
+  if (item.speciesThatNeedModels.length > 0) {
+    return (
+      <Box fontSize="xs" fontStyle="italic" fontWeight="600" opacity="0.8">
+        Need {item.speciesThatNeedModels.length}1 models
+      </Box>
+    );
+  }
+
+  return (
+    <Box fontSize="xs" fontStyle="italic" opacity="0.8">
+      Fully modeled!
+    </Box>
+  );
+}
+
 function ItemCardHStack({ children }) {
   return (
     // HACK: I wanted to just have an HStack with overflow:auto and internal
diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js
index 56aa209..dd7c586 100644
--- a/src/app/components/SquareItemCard.js
+++ b/src/app/components/SquareItemCard.js
@@ -126,7 +126,11 @@ function SquareItemCardLayout({
           >
             {name}
           </div>
-          {footer && <Box marginTop="2">{footer}</Box>}
+          {footer && (
+            <Box marginTop="2" width="100%">
+              {footer}
+            </Box>
+          )}
         </div>
       )}
     </ClassNames>