diff --git a/src/lib/custom-animations/CountWheel.tsx b/src/lib/custom-animations/CountWheel.tsx index 1a867671..2e435f7d 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 594117bf..78120b70 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 f5802ecc..ee3d413e 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 6dc94c29..ef330bc6 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 6a58a562..de73103c 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}> - +