feat(CX-3770): Update My Collection insights tab placeholder (#8850)

feat: add my collection insights tab placeholder
artsy · Jun 9, 2023 · 24fa47f · 24fa47f
1 parent 8c1aef7
commit 24fa47f
Showing 1 changed file with 100 additions and 8 deletions.
diff --git a/src/app/Scenes/MyCollection/Screens/Insights/MyCollectionInsights.tsx b/src/app/Scenes/MyCollection/Screens/Insights/MyCollectionInsights.tsx
@@ -1,10 +1,16 @@
-import { Flex, Spinner, Tabs } from "@artsy/palette-mobile"
+import { Flex, Spacer, Tabs, useColor, useSpace } from "@artsy/palette-mobile"
 import { MyCollectionInsightsQuery } from "__generated__/MyCollectionInsightsQuery.graphql"
 import { MyCollectionArtworkUploadMessages } from "app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkUploadMessages"
 import { Tab } from "app/Scenes/MyProfile/MyProfileHeaderMyCollectionAndSavedWorks"
 import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { extractNodes } from "app/utils/extractNodes"
 import { setVisualClueAsSeen, useVisualClue } from "app/utils/hooks/useVisualClue"
+import {
+  PlaceholderBox,
+  PlaceholderRaggedText,
+  PlaceholderText,
+  RandomNumberGenerator,
+} from "app/utils/placeholders"
 import {
   MY_COLLECTION_INSIGHTS_REFRESH_KEY,
   MY_COLLECTION_REFRESH_KEY,
@@ -119,17 +125,103 @@ export const MyCollectionInsights: React.FC<{}> = ({}) => {
 }
 
 export const MyCollectionInsightsQR: React.FC<{}> = () => (
-  <Suspense
-    fallback={
-      <Flex flex={1} flexGrow={1} justifyContent="center" alignItems="center">
-        <Spinner />
-      </Flex>
-    }
-  >
+  <Suspense fallback={<MyCollectionInsightsPlaceholder />}>
     <MyCollectionInsights />
   </Suspense>
 )
 
+const MyCollectionInsightsPlaceholder = () => {
+  const space = useSpace()
+  const color = useColor()
+  const rng = new RandomNumberGenerator(Math.random())
+
+  return (
+    <Tabs.ScrollView scrollEnabled={false} contentContainerStyle={{ paddingHorizontal: 0 }}>
+      {/* MyCollectionInsightsOverview */}
+      <Flex p={2} pb={4} flexDirection="row">
+        <Flex flex={1} alignSelf="flex-start">
+          <PlaceholderText width={100} marginBottom={space(1)} />
+          <PlaceholderText width={20} height={24} />
+        </Flex>
+
+        <Flex flex={1} alignSelf="flex-start">
+          <PlaceholderText width={85} marginBottom={space(1)} />
+          <PlaceholderText width={20} height={24} />
+        </Flex>
+      </Flex>
+      {/* MyCollectionInsightsOverview */}
+
+      {/* CareerHighlightsRail */}
+      <Flex py={1} pl={1} mb={4} backgroundColor={color("black5")} flexDirection="row">
+        {/* CareerHighlighCard */}
+        {[...Array(3)].map((_, i) => (
+          <Flex
+            key={`career-highlight-placeholder-${i}`}
+            p={1}
+            ml={1}
+            height={135}
+            width={205}
+            backgroundColor="white"
+            border={1}
+            borderColor="black10"
+          >
+            <Flex flexDirection="row" alignItems="center" justifyContent="flex-end">
+              <Flex
+                width={26}
+                height={26}
+                alignSelf="flex-end"
+                alignItems="center"
+                justifyContent="center"
+                border={1}
+                borderColor="black10"
+                borderRadius={24}
+              >
+                <PlaceholderBox width={15} height={15} />
+              </Flex>
+            </Flex>
+            <Flex justifyContent="flex-end" flex={1}>
+              <PlaceholderText width={20} height={24} />
+              <>
+                <PlaceholderText width={180} />
+                <PlaceholderText width={70} />
+              </>
+            </Flex>
+          </Flex>
+        ))}
+      </Flex>
+      {/* CareerHighlightsRail */}
+
+      {/* AuctionResultsForArtistsYouCollectRail */}
+      <Flex mb={4} px={2}>
+        <PlaceholderText width={170} height={20} />
+
+        {[...Array(3)].map((_, i) => (
+          <Flex key={`auction-results-placeholder-${i}`} mt={i ? 2 : 0} flexDirection="row">
+            {/* Sale Artwork Thumbnail Image */}
+            <PlaceholderBox width={100} height={130} />
+
+            {/* Sale Artwork Details */}
+            <Flex pl="15px" flex={1} flexDirection="row" justifyContent="space-between">
+              <Flex flex={4}>
+                <Flex>
+                  <PlaceholderText width={100} />
+                  <PlaceholderRaggedText seed={rng.next()} numLines={1} />
+                  <PlaceholderRaggedText seed={200 + rng.next()} numLines={1} />
+                  <PlaceholderRaggedText seed={180 + rng.next()} numLines={1} />
+                  <Spacer y={1} />
+                  <PlaceholderText width={150} />
+                  <PlaceholderText width={80} />
+                </Flex>
+              </Flex>
+            </Flex>
+          </Flex>
+        ))}
+      </Flex>
+      {/* AuctionResultsForArtistsYouCollectRail */}
+    </Tabs.ScrollView>
+  )
+}
+
 export const MyCollectionInsightsScreenQuery = graphql`
   query MyCollectionInsightsQuery {
     me {