From 496e2e9550f06936af90e902af2df55993080faf Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 15 Sep 2020 04:54:37 -0700
Subject: [PATCH] tweaks to item page description loading delay

make it 2 lines when embedded, and also add a Delay, bc prod is much faster to load this and it's annoying to see the flash!
---
 src/app/ItemPage.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 3a18d54..3818cdb 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -31,7 +31,7 @@ import {
   NcBadge,
   NpBadge,
 } from "./components/ItemCard";
-import { Heading1, usePageTitle } from "./util";
+import { Delay, Heading1, usePageTitle } from "./util";
 import OutfitPreview from "./components/OutfitPreview";
 
 function ItemPage() {
@@ -73,7 +73,11 @@ function ItemPageHeader({ itemId, isEmbedded }) {
 
   usePageTitle(data?.item?.name, { skip: isEmbedded });
 
-  const numDescriptionLines = useBreakpointValue({ base: 2, md: 1 });
+  // Show 2 lines of description text placeholder on small screens, or when
+  // embedded in the wardrobe page's narrow drawer. In larger contexts, show
+  // just 1 line.
+  const viewportNumDescriptionLines = useBreakpointValue({ base: 2, md: 1 });
+  const numDescriptionLines = isEmbedded ? 2 : viewportNumDescriptionLines;
 
   if (error) {
     return <Box color="red.400">{error.message}</Box>;
@@ -116,7 +120,9 @@ function ItemPageHeader({ itemId, isEmbedded }) {
             alignItems="stretch"
             justifyContent="center"
           >
-            <SkeletonText noOfLines={numDescriptionLines} spacing="4" />
+            <Delay ms={2000}>
+              <SkeletonText noOfLines={numDescriptionLines} spacing="4" />
+            </Delay>
           </Box>
         )}
       </Box>