diff --git a/src/lib/custom-animations/CountWheel.tsx b/src/lib/custom-animations/CountWheel.tsx index 1a86767125..2e435f7d38 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 594117bfe0..78120b7078 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(null) diff --git a/src/lib/custom-animations/LikeIcon.tsx b/src/lib/custom-animations/LikeIcon.tsx index f5802eccb4..ee3d413e5f 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 ( diff --git a/src/lib/custom-animations/LikeIcon.web.tsx b/src/lib/custom-animations/LikeIcon.web.tsx index 6dc94c2917..ef330bc62c 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(null) diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 6a58a5624a..de73103c76 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 - 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}> - +