Skip to content

Commit cad9fad

Browse files
MounirDhahriMounirDhahri
committed
fix: Tabs.Flatlist issues
1 parent ec5fcfb commit cad9fad

File tree

13 files changed

+98
-58
lines changed

13 files changed

+98
-58
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
"dependencies": {
110110
"@artsy/cohesion": "4.336.0",
111111
"@artsy/icons": "3.64.0",
112-
"@artsy/palette-mobile": "22.6.0--canary.425.5263.0",
112+
"@artsy/palette-mobile": "22.6.0--canary.425.5275.0",
113113
"@artsy/to-title-case": "1.2.0",
114114
"@braze/react-native-sdk": "16.1.0",
115115
"@d11/react-native-fast-image": "8.12.0",

‎src/app/Components/Artist/ArtistAbout/ArtistAbout.tsx‎

Lines changed: 75 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ContextModule, OwnerType } from "@artsy/cohesion"
2-
import { Flex, Join, Spacer, Tabs } from "@artsy/palette-mobile"
2+
import { Flex, Spacer, Tabs, useSpace } from "@artsy/palette-mobile"
33
import { ArtistAbout_artist$data } from "__generated__/ArtistAbout_artist.graphql"
44
import { Articles } from "app/Components/Artist/Articles/Articles"
55
import { ArtistAboutEmpty } from "app/Components/Artist/ArtistAbout/ArtistAboutEmpty"
@@ -9,6 +9,7 @@ import { RelatedArtistsRail } from "app/Components/Artist/RelatedArtistsRail"
99
import { SectionTitle } from "app/Components/SectionTitle"
1010
import { ArtistSeriesMoreSeriesFragmentContainer } from "app/Scenes/ArtistSeries/ArtistSeriesMoreSeries"
1111
import { extractNodes } from "app/utils/extractNodes"
12+
import { compact } from "lodash"
1213
import { createFragmentContainer, graphql } from "react-relay"
1314
import { ArtistAboutShowsFragmentContainer } from "./ArtistAboutShows"
1415
import { ArtistCareerHighlights } from "./ArtistCareerHighlights"
@@ -18,6 +19,8 @@ interface Props {
1819
}
1920

2021
export const ArtistAbout: React.FC<Props> = ({ artist }) => {
22+
const space = useSpace()
23+
2124
const articles = extractNodes(artist.articlesConnection)
2225
const relatedArtists = extractNodes(artist.related?.artistsConnection)
2326
const relatedGenes = extractNodes(artist.related?.genes)
@@ -38,39 +41,82 @@ export const ArtistAbout: React.FC<Props> = ({ artist }) => {
3841
hasRelatedArtists ||
3942
hasRelatedGenes
4043

44+
const data = compact([
45+
hasBiography && {
46+
key: "biography",
47+
content: (
48+
<>
49+
<Spacer y={1} />
50+
<Flex maxWidth={MAX_WIDTH_BIO} px={2}>
51+
<SectionTitle title="Biography" />
52+
<Biography artist={artist} />
53+
</Flex>
54+
</>
55+
),
56+
},
57+
58+
!!hasInsights && {
59+
key: "insights",
60+
content: <ArtistCareerHighlights artist={artist} />,
61+
},
62+
63+
!!hasArtistSeries && {
64+
key: "artistSeries",
65+
content: (
66+
<ArtistSeriesMoreSeriesFragmentContainer
67+
px={2}
68+
contextScreenOwnerId={artist.internalID}
69+
contextScreenOwnerSlug={artist.slug}
70+
contextScreenOwnerType={OwnerType.artist}
71+
contextModule={ContextModule.artistSeriesRail}
72+
artist={artist}
73+
artistSeriesHeader="Top Artist Series"
74+
/>
75+
),
76+
},
77+
78+
!!hasArticles && {
79+
key: "articles",
80+
content: <Articles articles={articles} artist={artist} />,
81+
},
82+
83+
!!hasShows && {
84+
key: "shows",
85+
content: <ArtistAboutShowsFragmentContainer artist={artist} />,
86+
},
87+
88+
!!hasRelatedArtists && {
89+
key: "relatedArtists",
90+
content: <RelatedArtistsRail artists={relatedArtists} artist={artist} />,
91+
},
92+
!!hasRelatedGenes && {
93+
key: "relatedGenes",
94+
content: <ArtistAboutRelatedGenes genes={relatedGenes} />,
95+
},
96+
])
97+
98+
return (
99+
<Tabs.FlashList
100+
data={isDisplayable ? data : []}
101+
renderItem={({ item }) => item?.content}
102+
keyExtractor={(item) => item?.key}
103+
ItemSeparatorComponent={() => <Spacer y={4} />}
104+
contentContainerStyle={{ paddingHorizontal: 0, paddingVertical: space(4) }}
105+
ListEmptyComponent={() => <ArtistAboutEmpty my={6} />}
106+
/>
107+
)
108+
41109
return (
42110
<Tabs.ScrollView contentContainerStyle={{ paddingHorizontal: 0 }}>
43111
{isDisplayable ? (
44112
<>
45113
<Spacer y={2} />
46-
<Join separator={<Spacer y={4} />}>
47-
{!!hasBiography && (
48-
<>
49-
<Spacer y={1} />
50-
<Flex maxWidth={MAX_WIDTH_BIO} px={2}>
51-
<SectionTitle title="Biography" />
52-
<Biography artist={artist} />
53-
</Flex>
54-
</>
55-
)}
56-
{!!hasInsights && <ArtistCareerHighlights artist={artist} />}
57-
{!!hasArtistSeries && (
58-
<ArtistSeriesMoreSeriesFragmentContainer
59-
px={2}
60-
contextScreenOwnerId={artist.internalID}
61-
contextScreenOwnerSlug={artist.slug}
62-
contextScreenOwnerType={OwnerType.artist}
63-
contextModule={ContextModule.artistSeriesRail}
64-
artist={artist}
65-
artistSeriesHeader="Top Artist Series"
66-
/>
67-
)}
68-
{!!hasArticles && <Articles articles={articles} artist={artist} />}
69-
{!!hasShows && <ArtistAboutShowsFragmentContainer artist={artist} />}
70-
71-
{!!hasRelatedArtists && <RelatedArtistsRail artists={relatedArtists} artist={artist} />}
72-
{!!hasRelatedGenes && <ArtistAboutRelatedGenes genes={relatedGenes} />}
73-
</Join>
114+
<Tabs.FlashList
115+
data={data}
116+
renderItem={({ item }) => item?.content}
117+
keyExtractor={(item) => item?.key}
118+
contentContainerStyle={{ paddingHorizontal: 0 }}
119+
/>
74120
<Spacer y={4} />
75121
</>
76122
) : (

‎src/app/Components/Artist/ArtistInsights/ArtistInsights.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -346,8 +346,8 @@ const ArtistInsightsContent: React.FC<ArtistInsightsProps> = (props) => {
346346
)
347347

348348
return (
349-
<Flex flex={1}>
350-
<Tabs.FlatList
349+
<Flex flex={1} pt={2}>
350+
<Tabs.FlashList
351351
style={{
352352
marginTop: space(2),
353353
paddingBottom: space(4),

‎src/app/Components/Artist/ArtistInsights/MarketStats.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const MarketStats: React.FC<MarketStatsProps> = ({ priceInsightsConnection }) =>
5757
const formattedMedianSaleOverEstimatePercentage = Math.abs(actualMedianSaleOverEstimatePercentage)
5858

5959
return (
60-
<>
60+
<Flex>
6161
<Flex flexDirection="row" alignItems="center">
6262
<InfoButton
6363
titleElement={
@@ -116,7 +116,7 @@ const MarketStats: React.FC<MarketStatsProps> = ({ priceInsightsConnection }) =>
116116
</Flex>
117117
</Flex>
118118
<Separator my={2} ml={-2} width={screenWidth} />
119-
</>
119+
</Flex>
120120
)
121121
}
122122

‎src/app/Components/Artist/__tests__/ArtistHeaderNavRight.tests.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ jest.mock("@artsy/palette-mobile/dist/elements/Screen/ScreenScrollContext", () =
1212
value: 0,
1313
},
1414
scrollYOffset: 0,
15+
scrollYOffsetAnimated: {
16+
value: 0,
17+
},
1518
}),
1619
}))
1720

‎src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizTrendingArtists.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,8 @@ export const ArtQuizTrendingArtists = ({
1919
const artists = extractNodes(viewerData?.curatedTrendingArtists)
2020

2121
return (
22-
<Tabs.FlatList
22+
<Tabs.FlashList
2323
data={artists}
24-
initialNumToRender={2}
2524
keyExtractor={(item, index) => String(item?.internalID || index)}
2625
renderItem={({ item, index }) => {
2726
return <ArtQuizArtist artistData={item} key={index} />

‎src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizTrendingCollection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const ArtQuizTrendingCollection = ({
2424

2525
return (
2626
<Flex pt={2}>
27-
<Flex>
27+
<Flex px={2}>
2828
<Text variant="md">{collection?.title}</Text>
2929

3030
{!!collection?.descriptionMarkdown && (

‎src/app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResultsTabs/ArtQuizTrendingCollections.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ export const ArtQuizTrendingCollections: React.FC<ArtQuizTrendingCollectionsProp
1818
)
1919

2020
return (
21-
<Tabs.FlatList
21+
<Tabs.FlashList
2222
data={viewerData?.marketingCollections!}
23-
initialNumToRender={2}
2423
keyExtractor={(item, index) => String(item?.internalID || index)}
24+
contentContainerStyle={{ paddingHorizontal: 0 }}
2525
renderItem={({ item, index }) => {
2626
return <ArtQuizTrendingCollection collectionData={item} key={index} />
2727
}}

‎src/app/Scenes/Artist/__tests__/Artist.tests.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type ArtistQueries =
1414
| "SearchCriteriaQuery"
1515
| "ArtistAboveTheFoldQuery"
1616
| "ArtistBelowTheFoldQuery"
17-
| "MarketStatsQuery"
17+
| "ArtistInsightsQuery"
1818

1919
describe("Artist", () => {
2020
let mockEnvironment: ReturnType<typeof createMockEnvironment>
@@ -58,7 +58,7 @@ describe("Artist", () => {
5858
return { entities: ["test"] }
5959
},
6060
})
61-
mockMostRecentOperation("MarketStatsQuery")
61+
mockMostRecentOperation("ArtistInsightsQuery")
6262

6363
await flushPromiseQueue()
6464

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Box, Flex, Tabs, useSpace } from "@artsy/palette-mobile"
2+
import { ListRenderItem } from "@shopify/flash-list"
23
import { FairExhibitors_fair$data } from "__generated__/FairExhibitors_fair.graphql"
34
import Spinner from "app/Components/Spinner"
45
import { FAIR2_EXHIBITORS_PAGE_SIZE } from "app/Components/constants"
@@ -8,7 +9,6 @@ import { extractNodes } from "app/utils/extractNodes"
89
import { ExtractNodeType } from "app/utils/relayHelpers"
910
import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
1011
import React, { useCallback } from "react"
11-
import { ListRenderItem } from "react-native"
1212
import { createPaginationContainer, graphql, QueryRenderer, RelayPaginationProp } from "react-relay"
1313
import { FairExhibitorRailQueryRenderer } from "./FairExhibitorRail"
1414

@@ -48,7 +48,7 @@ const FairExhibitors: React.FC<FairExhibitorsProps> = ({ fair, relay }) => {
4848
const keyExtractor = (item: FairShowArtworks) => String(item?.id)
4949

5050
return (
51-
<Tabs.FlatList
51+
<Tabs.FlashList
5252
// reseting padding to -2 to remove the default padding from the FlatList
5353
contentContainerStyle={{ marginHorizontal: 0, marginTop: space(2) }}
5454
data={showsWithArtworks}
@@ -66,11 +66,6 @@ const FairExhibitors: React.FC<FairExhibitorsProps> = ({ fair, relay }) => {
6666
</Box>
6767
) : null
6868
}
69-
// We want to limit the number of loaded windows to 5 because the items are pretty heavy
70-
windowSize={5}
71-
// We are slowing down the scrolling intentionally because the screen is too heavy and scrolling
72-
// too fast leads to dropped frames
73-
decelerationRate={0.995}
7469
/>
7570
)
7671
}

0 commit comments

Comments
 (0)