feat: wip on replacing artwork grids with more performant masonry #doNotMerge #7693
Conversation
| contextScreenOwnerType={OwnerType.artist} | ||
| contextScreenOwnerId={artist.internalID} | ||
| contextScreenOwnerSlug={artist.slug} | ||
| <Box flex={1} height={height}> |
There was a problem hiding this comment.
if we don't add the height here the loadmore is triggered all the time.
| data={artworkdata} | ||
| numColumns={2} | ||
| estimatedItemSize={width / 2} | ||
| // contentContainerStyle={{ paddingTop: space(2), paddingHorizontal: space(2) }} |
There was a problem hiding this comment.
we can remove this completely
gkartalis
changed the title
| // <Artwork | ||
| // artwork={item} | ||
| // updateRecentSearchesOnTap | ||
| // itemIndex={index} | ||
| // /> |
There was a problem hiding this comment.
this is our artwork component. If we use it instead of the other one above the images jump a bit, they basically display another image briefly before rendering the correct one.
| <MasonryFlashList | ||
| contentContainerStyle={{ paddingVertical: space(2) }} | ||
| numColumns={2} | ||
| data={test} | ||
| estimatedItemSize={width / 2} | ||
| renderItem={({ item }) => { | ||
| console.warn({ img: item.image?.url }) | ||
| return ( | ||
| <Box mx={1}> | ||
| <OpaqueImageView | ||
| imageURL={item.image?.url} | ||
| width={width / 2 - space("2")} | ||
| aspectRatio={item.image?.aspectRatio} | ||
| /> | ||
| <Text>{item.title}</Text> | ||
| </Box> | ||
| ) | ||
| }} | ||
| ListEmptyComponent={ | ||
| <SimpleMessage m={2}>Nothing yet. Please check back later.</SimpleMessage> | ||
| } | ||
| /> |
There was a problem hiding this comment.
without the need of infinite scrolling flashlist works amazingly well without issues.
| @@ -154,7 +154,7 @@ export const StickyTabPage: React.FC<StickyTabPageProps> = ({ | |||
| > | |||
| {tabs.map(({ content }, index) => { | |||
| return ( | |||
| <View style={{ flex: 1, width }} key={index}> | |||
| <View style={{ backgroundColor: "green", flex: 1, width }} key={index}> | |||
There was a problem hiding this comment.
this can also be removed, it was added for debugging
| @@ -50,7 +50,7 @@ interface StickyTabPageProps { | |||
| */ | |||
| export const StickyTabPage: React.FC<StickyTabPageProps> = ({ | |||
| tabs, | |||
| staticHeaderContent = <></>, | |||
| staticHeaderContent = <Text>YOLO</Text>, | |||
There was a problem hiding this comment.
this can be also removed 🙈
| contentInset={{ top: stickyHeaderHeightValue + staticHeaderHeightValue }} | ||
| contentOffset={{ | ||
| y: -stickyHeaderHeightValue - staticHeaderHeightValue - space(6), | ||
| x: 0, | ||
| }} |
There was a problem hiding this comment.
essential in order to render the list correctly on the first render
| y: -stickyHeaderHeightValue - staticHeaderHeightValue - space(6), | ||
| x: 0, | ||
| }} | ||
| scrollEventThrottle={0.00000000001} |
There was a problem hiding this comment.
not sure if we need this
|
cc @MrSltun |
|
Closing for now, will revisit if they fix the issue from flashlist |
This PR resolves []
Description
wip
PR Checklist
To the reviewers 👀
Changelog updates
Changelog updates
Cross-platform user-facing changes
iOS user-facing changes
Android user-facing changes
Dev changes
Need help with something? Have a look at our docs, or get in touch with us.