feat: migrate HomeViewSectionShows section placeholder

artsy · Sep 13, 2024 · 6c0dcbb · 6c0dcbb
1 parent 16885be
commit 6c0dcbb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/app/Scenes/Home/Components/ShowsRail.tsx b/src/app/Scenes/Home/Components/ShowsRail.tsx
@@ -183,7 +183,7 @@ export const ShowsRailContainer: React.FC<ShowsRailContainerProps> = ({
   )
 }
 
-const ShowsRailPlaceholder: React.FC = () => {
+export const ShowsRailPlaceholder: React.FC = () => {
   return (
     <Flex ml={2} mt={2} testID="show-rail-placeholder">
       <RandomWidthPlaceholderText minWidth={100} maxWidth={200} marginBottom={20} />

diff --git a/src/app/Scenes/HomeView/HomeView.tsx b/src/app/Scenes/HomeView/HomeView.tsx
@@ -10,7 +10,7 @@ import { Suspense, useState } from "react"
 import { RefreshControl } from "react-native"
 import { fetchQuery, graphql, useLazyLoadQuery, usePaginationFragment } from "react-relay"
 
-const NUMBER_OF_SECTIONS_TO_LOAD = 10
+const NUMBER_OF_SECTIONS_TO_LOAD = 100
 // Hard coding the value here because 30px is not a valid value for the spacing unit
 // and we need it to be consistent with 60px spacing between sections
 export const HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT = "30px"

diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionMarketingCollections.tsx
@@ -202,13 +202,5 @@ export const HomeViewSectionMarketingCollectionsQueryRenderer: React.FC<{
     return null
   }
 
-  // // return <HomeViewSectionMarketingCollectionsPlaceholder />
-
-  // return (
-  //   <>
-  //     <HomeViewSectionMarketingCollectionsPlaceholder />
-  //     <HomeViewSectionMarketingCollections section={data.homeView.section} />
-  //   </>
-  // )
   return <HomeViewSectionMarketingCollections section={data.homeView.section} />
 }, HomeViewSectionMarketingCollectionsPlaceholder)
diff --git a/src/app/Scenes/HomeView/Sections/HomeViewSectionShows.tsx b/src/app/Scenes/HomeView/Sections/HomeViewSectionShows.tsx
@@ -1,7 +1,7 @@
-import { Flex } from "@artsy/palette-mobile"
+import { Flex, Skeleton } from "@artsy/palette-mobile"
 import { HomeViewSectionShowsQuery } from "__generated__/HomeViewSectionShowsQuery.graphql"
 import { HomeViewSectionShows_section$key } from "__generated__/HomeViewSectionShows_section.graphql"
-import { ShowsRailContainer } from "app/Scenes/Home/Components/ShowsRail"
+import { ShowsRailContainer, ShowsRailPlaceholder } from "app/Scenes/Home/Components/ShowsRail"
 import { HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT } from "app/Scenes/HomeView/HomeView"
 import { useHomeViewTracking } from "app/Scenes/HomeView/useHomeViewTracking"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
@@ -40,6 +40,16 @@ const fragment = graphql`
   }
 `
 
+const HomeViewSectionShowsPlaceholder: React.FC = () => {
+  return (
+    <Skeleton>
+      <Flex mx={2} my={HOME_VIEW_SECTIONS_SEPARATOR_HEIGHT}>
+        <ShowsRailPlaceholder />
+      </Flex>
+    </Skeleton>
+  )
+}
+
 const homeViewSectionShowsQuery = graphql`
   query HomeViewSectionShowsQuery($id: String!) {
     homeView {
@@ -62,4 +72,4 @@ export const HomeViewSectionShowsQueryRenderer: React.FC<{
   }
 
   return <HomeViewSectionShows section={data.homeView.section} />
-})
+}, HomeViewSectionShowsPlaceholder)