fix: flickering artwork images (#11529)

artsy · Feb 12, 2025 · 8bf683c · 8bf683c
1 parent 54c8e77
commit 8bf683c
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 119 deletions.
diff --git a/src/app/Components/FancySwiper/FancySwiper.tsx b/src/app/Components/FancySwiper/FancySwiper.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@artsy/palette-mobile"
 import { FancySwiperIcons } from "app/Components/FancySwiper/FancySwiperIcons"
-import React, { useRef } from "react"
+import React, { useMemo, useRef } from "react"
 import { PanResponder, Animated } from "react-native"
 import { FancySwiperCard } from "./FancySwiperCard"
 
@@ -27,7 +27,7 @@ export const FancySwiper = ({
   onSwipeLeft,
   onSwipeRight,
 }: FancySwiperProps) => {
-  const remainingCards = cards.reverse()
+  const remainingCards = useMemo(() => cards.reverse(), [cards.length])
   const swiper = useRef<Animated.ValueXY>(new Animated.ValueXY()).current
 
   const panResponder = PanResponder.create({

diff --git a/src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard.tsx b/src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard.tsx
@@ -14,138 +14,139 @@ import { useSaveArtworkToArtworkLists } from "app/Components/ArtworkLists/useSav
 import { GlobalStore } from "app/store/GlobalStore"
 import { Schema } from "app/utils/track"
 import { sizeToFit } from "app/utils/useSizeToFit"
+import { memo } from "react"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
 
 interface InfiniteDiscoveryArtworkCardProps {
   artwork: InfiniteDiscoveryArtworkCard_artwork$key
 }
 
-export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCardProps> = ({
-  artwork: artworkProp,
-}) => {
-  const { width: screenWidth, height: screenHeight } = useScreenDimensions()
-  const { trackEvent } = useTracking()
-  const color = useColor()
-  const { incrementSavedArtworksCount, decrementSavedArtworksCount } =
-    GlobalStore.actions.infiniteDiscovery
+export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCardProps> = memo(
+  ({ artwork: artworkProp }) => {
+    const { width: screenWidth, height: screenHeight } = useScreenDimensions()
+    const { trackEvent } = useTracking()
+    const color = useColor()
+    const { incrementSavedArtworksCount, decrementSavedArtworksCount } =
+      GlobalStore.actions.infiniteDiscovery
 
-  const artwork = useFragment<InfiniteDiscoveryArtworkCard_artwork$key>(
-    infiniteDiscoveryArtworkCardFragment,
-    artworkProp
-  )
+    const artwork = useFragment<InfiniteDiscoveryArtworkCard_artwork$key>(
+      infiniteDiscoveryArtworkCardFragment,
+      artworkProp
+    )
 
-  const { isSaved, saveArtworkToLists } = useSaveArtworkToArtworkLists({
-    artworkFragmentRef: artwork,
-    onCompleted: (isArtworkSaved) => {
-      trackEvent({
-        action_name: isArtworkSaved
-          ? Schema.ActionNames.ArtworkSave
-          : Schema.ActionNames.ArtworkUnsave,
-        action_type: Schema.ActionTypes.Success,
-        context_module: Schema.ContextModules.ArtworkActions,
-      })
+    const { isSaved, saveArtworkToLists } = useSaveArtworkToArtworkLists({
+      artworkFragmentRef: artwork,
+      onCompleted: (isArtworkSaved) => {
+        trackEvent({
+          action_name: isArtworkSaved
+            ? Schema.ActionNames.ArtworkSave
+            : Schema.ActionNames.ArtworkUnsave,
+          action_type: Schema.ActionTypes.Success,
+          context_module: Schema.ContextModules.ArtworkActions,
+        })
 
-      if (isArtworkSaved) {
-        incrementSavedArtworksCount()
-      } else {
-        decrementSavedArtworksCount()
-      }
-    },
-  })
+        if (isArtworkSaved) {
+          incrementSavedArtworksCount()
+        } else {
+          decrementSavedArtworksCount()
+        }
+      },
+    })
 
-  if (!artwork) {
-    return null
-  }
+    if (!artwork) {
+      return null
+    }
 
-  const MAX_ARTWORK_HEIGHT = screenHeight * 0.6
+    const MAX_ARTWORK_HEIGHT = screenHeight * 0.6
 
-  const src = artwork.images?.[0]?.url
-  const width = artwork.images?.[0]?.width ?? 0
-  const height = artwork.images?.[0]?.height ?? 0
+    const src = artwork.images?.[0]?.url
+    const width = artwork.images?.[0]?.width ?? 0
+    const height = artwork.images?.[0]?.height ?? 0
 
-  const size = sizeToFit({ width, height }, { width: screenWidth, height: MAX_ARTWORK_HEIGHT })
+    const size = sizeToFit({ width, height }, { width: screenWidth, height: MAX_ARTWORK_HEIGHT })
 
-  return (
-    <Flex backgroundColor="white100" width="100%" style={{ borderRadius: 10 }}>
-      <Flex mx={2} my={1}>
-        <ArtistListItemContainer
-          artist={artwork.artists?.[0]}
-          avatarSize="xxs"
-          includeTombstone={false}
-        />
-      </Flex>
+    return (
+      <Flex backgroundColor="white100" width="100%" style={{ borderRadius: 10 }}>
+        <Flex mx={2} my={1}>
+          <ArtistListItemContainer
+            artist={artwork.artists?.[0]}
+            avatarSize="xxs"
+            includeTombstone={false}
+          />
+        </Flex>
 
-      <Flex alignItems="center" minHeight={MAX_ARTWORK_HEIGHT} justifyContent="center">
-        {!!src && <Image src={src} height={size.height} width={size.width} />}
-      </Flex>
+        <Flex alignItems="center" minHeight={MAX_ARTWORK_HEIGHT} justifyContent="center">
+          {!!src && <Image src={src} height={size.height} width={size.width} />}
+        </Flex>
 
-      <Flex flexDirection="row" justifyContent="space-between" p={1} mx={2}>
-        <Flex>
-          <Flex flexDirection="row" maxWidth={screenWidth - 200}>
-            <Text
-              color="black60"
-              italic
-              variant="sm-display"
-              ellipsizeMode="tail"
-              numberOfLines={1}
-            >
-              {artwork.title}
-            </Text>
-            <Text color="black60" variant="sm-display">
-              , {artwork.date}
-            </Text>
+        <Flex flexDirection="row" justifyContent="space-between" p={1} mx={2}>
+          <Flex>
+            <Flex flexDirection="row" maxWidth={screenWidth - 200}>
+              <Text
+                color="black60"
+                italic
+                variant="sm-display"
+                ellipsizeMode="tail"
+                numberOfLines={1}
+              >
+                {artwork.title}
+              </Text>
+              <Text color="black60" variant="sm-display">
+                , {artwork.date}
+              </Text>
+            </Flex>
+            <Text variant="sm-display">{artwork.saleMessage}</Text>
           </Flex>
-          <Text variant="sm-display">{artwork.saleMessage}</Text>
+          <Touchable
+            haptic
+            hitSlop={{ bottom: 5, right: 5, left: 5, top: 5 }}
+            onPress={saveArtworkToLists}
+            testID="save-artwork-icon"
+          >
+            {!!isSaved ? (
+              <Flex
+                style={{
+                  width: HEART_CIRCLE_SIZE,
+                  height: HEART_CIRCLE_SIZE,
+                  borderRadius: HEART_CIRCLE_SIZE,
+                  backgroundColor: color("black5"),
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <HeartFillIcon
+                  testID="filled-heart-icon"
+                  height={HEART_ICON_SIZE}
+                  width={HEART_ICON_SIZE}
+                  fill="blue100"
+                />
+              </Flex>
+            ) : (
+              <Flex
+                style={{
+                  width: HEART_CIRCLE_SIZE,
+                  height: HEART_CIRCLE_SIZE,
+                  borderRadius: HEART_CIRCLE_SIZE,
+                  backgroundColor: color("black5"),
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <HeartIcon
+                  testID="empty-heart-icon"
+                  height={HEART_ICON_SIZE}
+                  width={HEART_ICON_SIZE}
+                  fill="black100"
+                />
+              </Flex>
+            )}
+          </Touchable>
         </Flex>
-        <Touchable
-          haptic
-          hitSlop={{ bottom: 5, right: 5, left: 5, top: 5 }}
-          onPress={saveArtworkToLists}
-          testID="save-artwork-icon"
-        >
-          {!!isSaved ? (
-            <Flex
-              style={{
-                width: HEART_CIRCLE_SIZE,
-                height: HEART_CIRCLE_SIZE,
-                borderRadius: HEART_CIRCLE_SIZE,
-                backgroundColor: color("black5"),
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <HeartFillIcon
-                testID="filled-heart-icon"
-                height={HEART_ICON_SIZE}
-                width={HEART_ICON_SIZE}
-                fill="blue100"
-              />
-            </Flex>
-          ) : (
-            <Flex
-              style={{
-                width: HEART_CIRCLE_SIZE,
-                height: HEART_CIRCLE_SIZE,
-                borderRadius: HEART_CIRCLE_SIZE,
-                backgroundColor: color("black5"),
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-              <HeartIcon
-                testID="empty-heart-icon"
-                height={HEART_ICON_SIZE}
-                width={HEART_ICON_SIZE}
-                fill="black100"
-              />
-            </Flex>
-          )}
-        </Touchable>
       </Flex>
-    </Flex>
-  )
-}
+    )
+  }
+)
 
 const infiniteDiscoveryArtworkCardFragment = graphql`
   fragment InfiniteDiscoveryArtworkCard_artwork on Artwork {

diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
@@ -17,7 +17,7 @@ import { goBack, navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import { pluralize } from "app/utils/pluralize"
 import { ExtractNodeType } from "app/utils/relayHelpers"
-import { useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { graphql, PreloadedQuery, usePreloadedQuery, useQueryLoader } from "react-relay"
 import type {
@@ -76,10 +76,9 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
     }
   }
 
-  const handleCardSwiped = () => {
-    const dismissedArtworkId = artworkCards[index].artworkId
-
+  const handleCardSwiped = useCallback(() => {
     if (index < artworks.length - 1) {
+      const dismissedArtworkId = artworkCards[index].artworkId
       setIndex(index + 1)
       addDisoveredArtworkId(dismissedArtworkId)
     }
@@ -88,7 +87,7 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
     if (index === artworks.length - REFETCH_BUFFER) {
       fetchMoreArtworks()
     }
-  }
+  }, [index, artworks.length, fetchMoreArtworks])
 
   const handleExitPressed = () => {
     if (savedArtworksCount > 0) {