chore: spike on skeletons

data/schema.graphql

@@ -10723,6 +10723,9 @@ type HomeView {
 
 # A component specification
 type HomeViewComponent {
+  # A URL to navigate to when clicked
+  href: String
+
   # A display title for this section
   title: String!
 }

src/app/Scenes/HomeView/HomeView.tsx

@@ -47,11 +47,11 @@ export const homeViewScreenQuery = graphql`
             __typename
             ... on GenericHomeViewSection {
               internalID
-              ...GenericHomeViewSection_section
+              # ...GenericHomeViewSection_section
             }
             ... on ArtworksRailHomeViewSection {
               internalID
-              ...ArtworksRailHomeViewSection_section
+              # ...ArtworksRailHomeViewSection_section
             }
           }
         }

src/app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection.tsx

@@ -1,11 +1,16 @@
 import { Flex } from "@artsy/palette-mobile"
+import { ArtworksRailHomeViewSectionQuery } from "__generated__/ArtworksRailHomeViewSectionQuery.graphql"
 import { ArtworksRailHomeViewSection_section$key } from "__generated__/ArtworksRailHomeViewSection_section.graphql"
-import { LargeArtworkRail } from "app/Components/ArtworkRail/LargeArtworkRail"
+import {
+  LargeArtworkRail,
+  LargeArtworkRailPlaceholder,
+} from "app/Components/ArtworkRail/LargeArtworkRail"
 import { SectionTitle } from "app/Components/SectionTitle"
+import { SectionT } from "app/Scenes/HomeView/Sections/Section"
 import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
-import { View } from "react-native"
-import { graphql, useFragment } from "react-relay"
+import { withSuspense } from "app/utils/hooks/withSuspense"
+import { graphql, useFragment, useLazyLoadQuery } from "react-relay"
 
 interface ArtworksRailHomeViewSectionProps {
   section: ArtworksRailHomeViewSection_section$key
@@ -15,43 +20,75 @@ export const ArtworksRailHomeViewSection: React.FC<ArtworksRailHomeViewSectionPr
   section,
 }) => {
   const data = useFragment(fragment, section)
-  const title = data.component?.title
+
   const artworks = extractNodes(data.artworksConnection)
-  const componentHref = "" // TODO: should be in schema
 
-  if (!artworks || artworks.length === 0) return null
+  if (!data.component || !artworks || artworks.length === 0) {
+    return null
+  }
+
+  const { title, href } = data.component
 
   const handleOnArtworkPress = (artwork: any, _position: any) => {
     navigate(artwork.href)
   }
 
   return (
     <Flex>
-      <View>
-        <Flex pl={2} pr={2}>
-          <SectionTitle
-            title={title}
-            onPress={() => {
-              navigate(componentHref)
-            }}
-          />
-        </Flex>
-        <LargeArtworkRail
-          artworks={artworks}
-          onPress={handleOnArtworkPress}
-          showSaveIcon
-          onMorePress={() => {
-            navigate(componentHref)
-          }}
-        />
-      </View>
+      <Flex pl={2} pr={2}>
+        <SectionTitle title={title} {...(href ? { onPress: () => navigate(href) } : {})} />
+      </Flex>
+      <LargeArtworkRail
+        artworks={artworks}
+        onPress={handleOnArtworkPress}
+        showSaveIcon
+        {...(href ? { onMorePress: () => navigate(href) } : {})}
+      />
     </Flex>
   )
 }
 
+const artworksRailHomeViewSectionQuery = graphql`
+  query ArtworksRailHomeViewSectionQuery($id: String!) {
+    homeView {
+      section(id: $id) {
+        ...ArtworksRailHomeViewSection_section
+      }
+    }
+  }
+`
+
+interface ArtworksRailHomeViewSectionQueryRendererProps {
+  section: SectionT
+}
+
+export const ArtworksRailHomeViewSectionQueryRenderer = withSuspense(
+  (props: ArtworksRailHomeViewSectionQueryRendererProps) => {
+    const data = useLazyLoadQuery<ArtworksRailHomeViewSectionQuery>(
+      artworksRailHomeViewSectionQuery,
+      {
+        id: props.section.internalID as string,
+      }
+    )
+
+    if (!data?.homeView?.section) {
+      return null
+    }
+
+    return <ArtworksRailHomeViewSection section={data.homeView.section} />
+  },
+  () => (
+    <Flex flexDirection="row">
+      <LargeArtworkRailPlaceholder />
+    </Flex>
+  )
+)
+
 const fragment = graphql`
   fragment ArtworksRailHomeViewSection_section on ArtworksRailHomeViewSection {
+    id
     component {
+      href
       title
     }
 

src/app/Scenes/HomeView/Sections/Section.tsx

@@ -1,5 +1,5 @@
 import { HomeViewQuery$data } from "__generated__/HomeViewQuery.graphql"
-import { ArtworksRailHomeViewSection } from "app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection"
+import { ArtworksRailHomeViewSectionQueryRenderer } from "app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection"
 import { GenericHomeViewSection } from "app/Scenes/HomeView/Sections/GenericHomeViewSection"
 import { ExtractNodeType } from "app/utils/relayHelpers"
 import { Text } from "react-native-svg"
@@ -8,14 +8,14 @@ type SectionsConnection = NonNullable<
   NonNullable<NonNullable<HomeViewQuery$data>["homeView"]>["sectionsConnection"]
 >
 
-type SectionT = ExtractNodeType<SectionsConnection>
+export type SectionT = ExtractNodeType<SectionsConnection>
 
 export const Section: React.FC<{ section: SectionT }> = (props) => {
   const { section } = props
 
   switch (section.__typename) {
     case "ArtworksRailHomeViewSection":
-      return <ArtworksRailHomeViewSection section={section} />
+      return <ArtworksRailHomeViewSectionQueryRenderer section={section} />
     case "GenericHomeViewSection":
       return <GenericHomeViewSection section={section} />
     default:

src/app/routes.ts

@@ -191,7 +191,6 @@ function getDomainMap(): Record<string, RouteMatcher[] | null> {
     addRoute("/feature/:slug", "Feature"),
     addRoute("/galleries-for-you", "GalleriesForYou"),
     addRoute("/gene/:geneID", "Gene"),
-    addRoute("/home-view", "HomeView"),
     addRoute("/inbox", "Inbox"),
     addRoute("/inquiry/:artworkID", "Inquiry"),
     addRoute("/local-discovery", "LocalDiscovery"),
@@ -230,6 +229,7 @@ function getDomainMap(): Record<string, RouteMatcher[] | null> {
     addRoute("/news", "News"),
     addRoute("/new-for-you", "NewWorksForYou"),
     addRoute("/new-works-from-galleries-you-follow", "NewWorksFromGalleriesYouFollow"),
+    addRoute("/new-works-from-galleries-you-follow", "NewWorksFromGalleriesYouFollow"),
     addRoute("/orders", "OrderHistory"),
     addRoute("/partner-locations/:partnerID", "PartnerLocations"),
     addRoute("/partner-offer/:partnerOfferID/checkout", "PartnerOfferContainer"),