chore: add heart icon

Author: MounirDhahri

src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryArtworkCard.tsx

@@ -15,12 +15,15 @@ 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 { LayoutAnimation, ViewStyle } from "react-native"
+import { memo, useEffect } from "react"
+import { ViewStyle } from "react-native"
 import Animated, {
+  Easing,
   interpolate,
   useAnimatedStyle,
   useSharedValue,
+  withDelay,
+  withSequence,
   withTiming,
 } from "react-native-reanimated"
 import { graphql, useFragment } from "react-relay"
@@ -82,13 +85,23 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
       }
     })
 
-    useAnimatedStyle(() => {
+    useEffect(() => {
       saveAnimationProgress.value = withTiming(isSavedProp ? 1 : 0, {
         duration: 300,
       })
-      return {} // Required for ts
     }, [isSavedProp])
 
+    const savedArtworkAnimationStyles = useAnimatedStyle(() => {
+      return {
+        opacity: isSavedProp
+          ? withSequence(
+              withTiming(1, { duration: 300, easing: Easing.linear }),
+              withDelay(500, withTiming(0, { duration: 300, easing: Easing.linear }))
+            )
+          : 0,
+      }
+    })
+
     if (!artwork) {
       return null
     }
@@ -114,6 +127,23 @@ export const InfiniteDiscoveryArtworkCard: React.FC<InfiniteDiscoveryArtworkCard
           />
         </Flex>
         <Flex alignItems="center" minHeight={MAX_ARTWORK_HEIGHT} justifyContent="center">
+          <Animated.View
+            style={[
+              {
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "rgba(255, 255, 255, 0.5)",
+                justifyContent: "center",
+                alignItems: "center",
+                zIndex: 100,
+              },
+              savedArtworkAnimationStyles,
+            ]}
+          >
+            <HeartFillIcon height={64} width={64} fill="white100" />
+          </Animated.View>
+
           {!!src && <Image src={src} height={size.height} width={size.width} />}
         </Flex>
         <Flex flexDirection="row" justifyContent="space-between" p={1} mx={2}>

src/app/Scenes/InfiniteDiscovery/Components/InfiniteDiscoveryOnboarding.tsx

@@ -38,6 +38,8 @@ export const InfiniteDiscoveryOnboarding: React.FC<InfiniteDiscoveryOnboardingPr
           shadowOpacity: 0.2,
           shadowOffset: { height: 0, width: 0 },
         }}
+        // Only show the saved hint for the upper card - since the cards are reverted in the swiper,
+        // the upper card index is the last in the array
         isSaved={i === artworks.length - 1 ? showSavedHint : false}
       />
     ))
@@ -59,11 +61,11 @@ export const InfiniteDiscoveryOnboarding: React.FC<InfiniteDiscoveryOnboardingPr
   }, [hasInteractedWithOnboarding])
 
   const showOnboardingAnimation = () => {
-    swiperRef.current?.swipeLeftThenRight(ONBOARDING_SWIPE_ANIMATION_DURATION)
+    setShowSavedHint(true)
 
     setTimeout(() => {
-      setShowSavedHint(true)
-    }, ONBOARDING_SWIPE_ANIMATION_DURATION + ONBOARDING_ANIMATION_DELAY)
+      swiperRef.current?.swipeLeftThenRight(ONBOARDING_SWIPE_ANIMATION_DURATION)
+    }, ONBOARDING_ANIMATION_DELAY + ONBOARDING_SAVED_HINT_DURATION)
 
     setTimeout(
       () => {
@@ -80,8 +82,10 @@ export const InfiniteDiscoveryOnboarding: React.FC<InfiniteDiscoveryOnboardingPr
       return
     }
 
+    // Wait for a second before showing the animation
     setTimeout(() => {
       showOnboardingAnimation()
+      // Show the animation every 5 seconds afterwards
       setInterval(() => {
         showOnboardingAnimation()
       }, 5000)

src/app/Scenes/InfiniteDiscovery/Components/Swiper/Swiper.tsx

@@ -73,8 +73,8 @@ export const Swiper = forwardRef<SwiperRefProps, SwiperProps>(
     const previousCards = usePrevious(cards)
 
     useEffect(() => {
-      if (previousCards && cards.length < previousCards.length) {
-        setNumberExtraCardsAdded(previousCards.length - cards.length)
+      if (previousCards && cards.length !== previousCards.length) {
+        setNumberExtraCardsAdded(cards.length - previousCards.length)
       }
     }, [cards.length])