fix: fair exhibitors (#10521)

* fix: exhibitors not scrollable

* fix(perf): use lazyLoad over fetchQuery to cache the datam

* refactor: vanityurl

src/app/AppRegistry.tsx

@@ -74,7 +74,7 @@ import { CitySavedListQueryRenderer } from "./Scenes/City/CitySavedList"
 import { CitySectionListQueryRenderer } from "./Scenes/City/CitySectionList"
 import { CollectionQueryRenderer } from "./Scenes/Collection/Collection"
 import { CollectionFullFeaturedArtistListQueryRenderer } from "./Scenes/Collection/Components/FullFeaturedArtistList"
-import { FairQueryRenderer } from "./Scenes/Fair/Fair"
+import { FairScreen } from "./Scenes/Fair/Fair"
 import { FairAllFollowedArtistsQueryRenderer } from "./Scenes/Fair/FairAllFollowedArtists"
 import { FairArticlesQueryRenderer } from "./Scenes/Fair/FairArticles"
 import { FairMoreInfoQueryRenderer } from "./Scenes/Fair/FairMoreInfo"
@@ -468,7 +468,7 @@ export const modules = defineModules({
     hidesBackButton: true,
     hidesBottomTabs: true,
   }),
-  Fair: reactModule(FairQueryRenderer, { fullBleed: true, hidesBackButton: true }),
+  Fair: reactModule(FairScreen, { fullBleed: true, hidesBackButton: true }),
   FairMoreInfo: reactModule(FairMoreInfoQueryRenderer, { fullBleed: true, hidesBackButton: true }),
   FairArticles: reactModule(FairArticlesQueryRenderer),
   FairAllFollowedArtists: reactModule(FairAllFollowedArtistsQueryRenderer),

src/app/Scenes/Fair/Components/FairExhibitors.tsx

@@ -1,10 +1,9 @@
-import { Flex, Box } from "@artsy/palette-mobile"
+import { Flex, Box, Tabs } from "@artsy/palette-mobile"
 import { FairExhibitors_fair$data } from "__generated__/FairExhibitors_fair.graphql"
 import Spinner from "app/Components/Spinner"
 import { FAIR2_EXHIBITORS_PAGE_SIZE } from "app/Components/constants"
 import { extractNodes } from "app/utils/extractNodes"
 import React, { useCallback } from "react"
-import { FlatList } from "react-native"
 import { createPaginationContainer, graphql, RelayPaginationProp } from "react-relay"
 import { FairExhibitorRailFragmentContainer } from "./FairExhibitorRail"
 
@@ -41,8 +40,11 @@ const FairExhibitors: React.FC<FairExhibitorsProps> = ({ fair, relay }) => {
   const keyExtractor = (item: any) => String(item?.id)
 
   return (
-    <FlatList
+    <Tabs.FlatList
+      // reseting padding to -2 to remove the default padding from the FlatList
+      contentContainerStyle={{ padding: -2 }}
       data={showsWithArtworks}
+      ListHeaderComponent={<Flex my={2} />}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
       onEndReached={loadMoreExhibitors}

src/app/Scenes/Fair/Fair.tsx

@@ -19,11 +19,10 @@ import { FairExhibitorsFragmentContainer } from "app/Scenes/Fair/Components/Fair
 import { FairOverview } from "app/Scenes/Fair/FairOverview"
 import { goBack } from "app/system/navigation/navigate"
 import { ProvideScreenTracking, Schema } from "app/utils/track"
-import { useClientQuery } from "app/utils/useClientQuery"
-import React from "react"
+import React, { Suspense } from "react"
 import { TouchableOpacity } from "react-native"
 import RNShare from "react-native-share"
-import { createFragmentContainer, graphql, useFragment } from "react-relay"
+import { createFragmentContainer, graphql, useFragment, useLazyLoadQuery } from "react-relay"
 import { useTracking } from "react-tracking"
 import { FairHeader } from "./Components/FairHeader"
 
@@ -81,6 +80,9 @@ export const Fair: React.FC<FairProps> = ({ fair }) => {
       }}
     >
       <Tabs.TabsWithHeader
+        pagerProps={{
+          scrollEnabled: false,
+        }}
         initialTabName="Overview"
         title={`${data.name}`}
         showLargeHeaderText={false}
@@ -156,20 +158,22 @@ interface FairQueryRendererProps {
   fairID: string
 }
 
-export const FairQueryRenderer: React.FC<FairQueryRendererProps> = ({ fairID }) => {
-  const res = useClientQuery<FairQuery>({ query, variables: { fairID } })
-
-  if (res.loading) {
-    return <FairPlaceholder />
-  }
+const FairQueryRenderer: React.FC<FairQueryRendererProps> = ({ fairID }) => {
+  const data = useLazyLoadQuery<FairQuery>(query, { fairID })
 
-  if (!res.data?.fair) {
+  if (!data?.fair) {
     return null
   }
 
-  return <Fair fair={res.data.fair} />
+  return <Fair fair={data.fair} />
 }
 
+export const FairScreen: React.FC<FairQueryRendererProps> = ({ fairID }) => (
+  <Suspense fallback={<FairPlaceholder />}>
+    <FairQueryRenderer fairID={fairID} />
+  </Suspense>
+)
+
 export const FairPlaceholder: React.FC = () => {
   const { safeAreaInsets } = useScreenDimensions()
   const space = useSpace()

src/app/Scenes/VanityURL/VanityURLEntity.tsx

@@ -1,7 +1,7 @@
 import { Flex, Spinner } from "@artsy/palette-mobile"
 import { VanityURLEntityQuery } from "__generated__/VanityURLEntityQuery.graphql"
 import { VanityURLEntity_fairOrPartner$data } from "__generated__/VanityURLEntity_fairOrPartner.graphql"
-import { Fair, FairPlaceholder, FairQueryRenderer } from "app/Scenes/Fair/Fair"
+import { Fair, FairPlaceholder, FairScreen } from "app/Scenes/Fair/Fair"
 import { PartnerContainer, PartnerSkeleton } from "app/Scenes/Partner/Partner"
 import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
@@ -53,7 +53,7 @@ interface RendererProps {
 
 export const VanityURLEntityRenderer: React.FC<RendererProps> = ({ entity, slugType, slug }) => {
   if (slugType === "fairID") {
-    return <FairQueryRenderer fairID={slug} />
+    return <FairScreen fairID={slug} />
   } else if (!entity && !slugType) {
     return <VanityURLPossibleRedirect slug={slug} />
   } else {