jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix thin red circle around Like button on iOS (#6123)
* remove animation UI from DOM tree when not animated
* improve naming of vars
* more var changes
---------
Co-authored-by: Hailey <me@haileyok.com>
+14
-17
+3
-3
src/lib/custom-animations/CountWheel.tsx
+3
-3
src/lib/custom-animations/CountWheel.tsx
···
91
91
likeCount,
92
92
big,
93
93
isLiked,
94
-
isToggle,
94
+
hasBeenToggled,
95
95
}: {
96
96
likeCount: number
97
97
big?: boolean
98
98
isLiked: boolean
99
-
isToggle: boolean
99
+
hasBeenToggled: boolean
100
100
}) {
101
101
const t = useTheme()
102
-
const shouldAnimate = !useReducedMotion() && isToggle
102
+
const shouldAnimate = !useReducedMotion() && hasBeenToggled
103
103
const shouldRoll = decideShouldRoll(isLiked, likeCount)
104
104
105
105
// Incrementing the key will cause the `Animated.View` to re-render, with the newly selected entering/exiting
+6
-10
src/lib/custom-animations/LikeIcon.tsx
+6
-10
src/lib/custom-animations/LikeIcon.tsx
···
71
71
export function AnimatedLikeIcon({
72
72
isLiked,
73
73
big,
74
-
isToggle,
74
+
hasBeenToggled,
75
75
}: {
76
76
isLiked: boolean
77
77
big?: boolean
78
-
isToggle: boolean
78
+
hasBeenToggled: boolean
79
79
}) {
80
80
const t = useTheme()
81
81
const size = big ? 22 : 18
82
-
const shouldAnimate = !useReducedMotion() && isToggle
82
+
const shouldAnimate = !useReducedMotion() && hasBeenToggled
83
83
84
84
return (
85
85
<View>
···
95
95
width={size}
96
96
/>
97
97
)}
98
-
{isLiked ? (
98
+
{isLiked && shouldAnimate ? (
99
99
<>
100
100
<Animated.View
101
-
entering={
102
-
shouldAnimate ? circle1Keyframe.duration(300) : undefined
103
-
}
101
+
entering={circle1Keyframe.duration(300)}
104
102
style={{
105
103
position: 'absolute',
106
104
backgroundColor: s.likeColor.color,
···
114
112
}}
115
113
/>
116
114
<Animated.View
117
-
entering={
118
-
shouldAnimate ? circle2Keyframe.duration(300) : undefined
119
-
}
115
+
entering={circle2Keyframe.duration(300)}
120
116
style={{
121
117
position: 'absolute',
122
118
backgroundColor: t.atoms.bg.backgroundColor,
+5
-4
src/view/com/util/post-ctrls/PostCtrls.tsx
+5
-4
src/view/com/util/post-ctrls/PostCtrls.tsx
···
107
107
[t],
108
108
) as StyleProp<ViewStyle>
109
109
110
-
const [isToggleLikeIcon, setIsToggleLikeIcon] = React.useState(false)
110
+
const [hasLikeIconBeenToggled, setHasLikeIconBeenToggled] =
111
+
React.useState(false)
111
112
112
113
const onPressToggleLike = React.useCallback(async () => {
113
114
if (isBlocked) {
···
119
120
}
120
121
121
122
try {
122
-
setIsToggleLikeIcon(true)
123
+
setHasLikeIconBeenToggled(true)
123
124
if (!post.viewer?.like) {
124
125
playHaptic('Light')
125
126
sendInteraction({
···
311
312
<AnimatedLikeIcon
312
313
isLiked={Boolean(post.viewer?.like)}
313
314
big={big}
314
-
isToggle={isToggleLikeIcon}
315
+
hasBeenToggled={hasLikeIconBeenToggled}
315
316
/>
316
317
<CountWheel
317
318
likeCount={post.likeCount ?? 0}
318
319
big={big}
319
320
isLiked={Boolean(post.viewer?.like)}
320
-
isToggle={isToggleLikeIcon}
321
+
hasBeenToggled={hasLikeIconBeenToggled}
321
322
/>
322
323
</Pressable>
323
324
</View>