Only animate the like icon when from an actual toggle (#5096)

5 files changed, 20 insertions, 9 deletions

diff --git a/src/lib/custom-animations/CountWheel.tsx b/src/lib/custom-animations/CountWheel.tsx
index 1a8676712..2e435f7d3 100644
--- a/src/lib/custom-animations/CountWheel.tsx
+++ b/src/lib/custom-animations/CountWheel.tsx
@@ -91,13 +91,15 @@ export function CountWheel({
   likeCount,
   big,
   isLiked,
+  isToggle,
 }: {
   likeCount: number
   big?: boolean
   isLiked: boolean
+  isToggle: boolean
 }) {
   const t = useTheme()
-  const shouldAnimate = !useReducedMotion()
+  const shouldAnimate = !useReducedMotion() && isToggle
   const shouldRoll = decideShouldRoll(isLiked, likeCount)
 
   // Incrementing the key will cause the `Animated.View` to re-render, with the newly selected entering/exiting
diff --git a/src/lib/custom-animations/CountWheel.web.tsx b/src/lib/custom-animations/CountWheel.web.tsx
index 594117bfe..78120b707 100644
--- a/src/lib/custom-animations/CountWheel.web.tsx
+++ b/src/lib/custom-animations/CountWheel.web.tsx
@@ -39,13 +39,15 @@ export function CountWheel({
   likeCount,
   big,
   isLiked,
+  isToggle,
 }: {
   likeCount: number
   big?: boolean
   isLiked: boolean
+  isToggle: boolean
 }) {
   const t = useTheme()
-  const shouldAnimate = !useReducedMotion()
+  const shouldAnimate = !useReducedMotion() && isToggle
   const shouldRoll = decideShouldRoll(isLiked, likeCount)
 
   const countView = React.useRef<HTMLDivElement>(null)
diff --git a/src/lib/custom-animations/LikeIcon.tsx b/src/lib/custom-animations/LikeIcon.tsx
index f5802eccb..ee3d413e5 100644
--- a/src/lib/custom-animations/LikeIcon.tsx
+++ b/src/lib/custom-animations/LikeIcon.tsx
@@ -71,13 +71,15 @@ const circle2Keyframe = new Keyframe({
 export function AnimatedLikeIcon({
   isLiked,
   big,
+  isToggle,
 }: {
   isLiked: boolean
   big?: boolean
+  isToggle: boolean
 }) {
   const t = useTheme()
   const size = big ? 22 : 18
-  const shouldAnimate = !useReducedMotion()
+  const shouldAnimate = !useReducedMotion() && isToggle
 
   return (
     <View>
diff --git a/src/lib/custom-animations/LikeIcon.web.tsx b/src/lib/custom-animations/LikeIcon.web.tsx
index 6dc94c291..ef330bc62 100644
--- a/src/lib/custom-animations/LikeIcon.web.tsx
+++ b/src/lib/custom-animations/LikeIcon.web.tsx
@@ -41,13 +41,15 @@ const circle2Keyframe = [
 export function AnimatedLikeIcon({
   isLiked,
   big,
+  isToggle,
 }: {
   isLiked: boolean
   big?: boolean
+  isToggle: boolean
 }) {
   const t = useTheme()
   const size = big ? 22 : 18
-  const shouldAnimate = !useReducedMotion()
+  const shouldAnimate = !useReducedMotion() && isToggle
   const prevIsLiked = React.useRef(isLiked)
 
   const likeIconRef = React.useRef<HTMLDivElement>(null)
diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 6a58a5624..de73103c7 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -106,8 +106,7 @@ let PostCtrls = ({
     [t],
   ) as StyleProp<ViewStyle>
 
-  const likeValue = post.viewer?.like ? 1 : 0
-  const nextExpectedLikeValue = React.useRef(likeValue)
+  const [isToggleLikeIcon, setIsToggleLikeIcon] = React.useState(false)
 
   const onPressToggleLike = React.useCallback(async () => {
     if (isBlocked) {
@@ -119,8 +118,8 @@ let PostCtrls = ({
     }
 
     try {
+      setIsToggleLikeIcon(true)
       if (!post.viewer?.like) {
-        nextExpectedLikeValue.current = 1
         playHaptic()
         sendInteraction({
           item: post.uri,
@@ -130,7 +129,6 @@ let PostCtrls = ({
         captureAction(ProgressGuideAction.Like)
         await queueLike()
       } else {
-        nextExpectedLikeValue.current = 0
         await queueUnlike()
       }
     } catch (e: any) {
@@ -317,11 +315,16 @@ let PostCtrls = ({
           }
           accessibilityHint=""
           hitSlop={POST_CTRL_HITSLOP}>
-          <AnimatedLikeIcon isLiked={Boolean(post.viewer?.like)} big={big} />
+          <AnimatedLikeIcon
+            isLiked={Boolean(post.viewer?.like)}
+            big={big}
+            isToggle={isToggleLikeIcon}
+          />
           <CountWheel
             likeCount={post.likeCount ?? 0}
             big={big}
             isLiked={Boolean(post.viewer?.like)}
+            isToggle={isToggleLikeIcon}
           />
         </Pressable>
       </View>