forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Only animate the like icon when from an actual toggle (#5096)
+20
-9
+3
-1
src/lib/custom-animations/CountWheel.tsx
+3
-1
src/lib/custom-animations/CountWheel.tsx
···
91
91
likeCount,
92
92
big,
93
93
isLiked,
94
+
isToggle,
94
95
}: {
95
96
likeCount: number
96
97
big?: boolean
97
98
isLiked: boolean
99
+
isToggle: boolean
98
100
}) {
99
101
const t = useTheme()
100
-
const shouldAnimate = !useReducedMotion()
102
+
const shouldAnimate = !useReducedMotion() && isToggle
101
103
const shouldRoll = decideShouldRoll(isLiked, likeCount)
102
104
103
105
// Incrementing the key will cause the `Animated.View` to re-render, with the newly selected entering/exiting
+3
-1
src/lib/custom-animations/CountWheel.web.tsx
+3
-1
src/lib/custom-animations/CountWheel.web.tsx
···
39
39
likeCount,
40
40
big,
41
41
isLiked,
42
+
isToggle,
42
43
}: {
43
44
likeCount: number
44
45
big?: boolean
45
46
isLiked: boolean
47
+
isToggle: boolean
46
48
}) {
47
49
const t = useTheme()
48
-
const shouldAnimate = !useReducedMotion()
50
+
const shouldAnimate = !useReducedMotion() && isToggle
49
51
const shouldRoll = decideShouldRoll(isLiked, likeCount)
50
52
51
53
const countView = React.useRef<HTMLDivElement>(null)
+3
-1
src/lib/custom-animations/LikeIcon.tsx
+3
-1
src/lib/custom-animations/LikeIcon.tsx
···
71
71
export function AnimatedLikeIcon({
72
72
isLiked,
73
73
big,
74
+
isToggle,
74
75
}: {
75
76
isLiked: boolean
76
77
big?: boolean
78
+
isToggle: boolean
77
79
}) {
78
80
const t = useTheme()
79
81
const size = big ? 22 : 18
80
-
const shouldAnimate = !useReducedMotion()
82
+
const shouldAnimate = !useReducedMotion() && isToggle
81
83
82
84
return (
83
85
<View>
+3
-1
src/lib/custom-animations/LikeIcon.web.tsx
+3
-1
src/lib/custom-animations/LikeIcon.web.tsx
···
41
41
export function AnimatedLikeIcon({
42
42
isLiked,
43
43
big,
44
+
isToggle,
44
45
}: {
45
46
isLiked: boolean
46
47
big?: boolean
48
+
isToggle: boolean
47
49
}) {
48
50
const t = useTheme()
49
51
const size = big ? 22 : 18
50
-
const shouldAnimate = !useReducedMotion()
52
+
const shouldAnimate = !useReducedMotion() && isToggle
51
53
const prevIsLiked = React.useRef(isLiked)
52
54
53
55
const likeIconRef = React.useRef<HTMLDivElement>(null)
+8
-5
src/view/com/util/post-ctrls/PostCtrls.tsx
+8
-5
src/view/com/util/post-ctrls/PostCtrls.tsx
···
106
106
[t],
107
107
) as StyleProp<ViewStyle>
108
108
109
-
const likeValue = post.viewer?.like ? 1 : 0
110
-
const nextExpectedLikeValue = React.useRef(likeValue)
109
+
const [isToggleLikeIcon, setIsToggleLikeIcon] = React.useState(false)
111
110
112
111
const onPressToggleLike = React.useCallback(async () => {
113
112
if (isBlocked) {
···
119
118
}
120
119
121
120
try {
121
+
setIsToggleLikeIcon(true)
122
122
if (!post.viewer?.like) {
123
-
nextExpectedLikeValue.current = 1
124
123
playHaptic()
125
124
sendInteraction({
126
125
item: post.uri,
···
130
129
captureAction(ProgressGuideAction.Like)
131
130
await queueLike()
132
131
} else {
133
-
nextExpectedLikeValue.current = 0
134
132
await queueUnlike()
135
133
}
136
134
} catch (e: any) {
···
317
315
}
318
316
accessibilityHint=""
319
317
hitSlop={POST_CTRL_HITSLOP}>
320
-
<AnimatedLikeIcon isLiked={Boolean(post.viewer?.like)} big={big} />
318
+
<AnimatedLikeIcon
319
+
isLiked={Boolean(post.viewer?.like)}
320
+
big={big}
321
+
isToggle={isToggleLikeIcon}
322
+
/>
321
323
<CountWheel
322
324
likeCount={post.likeCount ?? 0}
323
325
big={big}
324
326
isLiked={Boolean(post.viewer?.like)}
327
+
isToggle={isToggleLikeIcon}
325
328
/>
326
329
</Pressable>
327
330
</View>