diff options
| author | khuddite <khuddite@gmail.com> | 2024-11-06 07:36:31 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-11-06 12:36:31 +0000 |
| commit | f95acdc8363f78618517c999fdc4f10ab6c20fa2 (patch) | |
| tree | 556488185dba2db4db1c66e9e1baf7a031aae4da /src/lib | |
| parent | 206df2ab801d211a412f9ce3694d90bdd053caaa (diff) | |
| download | voidsky-f95acdc8363f78618517c999fdc4f10ab6c20fa2.tar.zst | |
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>
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/custom-animations/CountWheel.tsx | 6 | ||||
| -rw-r--r-- | src/lib/custom-animations/LikeIcon.tsx | 16 |
2 files changed, 9 insertions, 13 deletions
diff --git a/src/lib/custom-animations/CountWheel.tsx b/src/lib/custom-animations/CountWheel.tsx index b4ca62c6e..b448ad227 100644 --- a/src/lib/custom-animations/CountWheel.tsx +++ b/src/lib/custom-animations/CountWheel.tsx @@ -91,15 +91,15 @@ export function CountWheel({ likeCount, big, isLiked, - isToggle, + hasBeenToggled, }: { likeCount: number big?: boolean isLiked: boolean - isToggle: boolean + hasBeenToggled: boolean }) { const t = useTheme() - const shouldAnimate = !useReducedMotion() && isToggle + const shouldAnimate = !useReducedMotion() && hasBeenToggled 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/LikeIcon.tsx b/src/lib/custom-animations/LikeIcon.tsx index 5c736e88d..1bc48d43b 100644 --- a/src/lib/custom-animations/LikeIcon.tsx +++ b/src/lib/custom-animations/LikeIcon.tsx @@ -71,15 +71,15 @@ const circle2Keyframe = new Keyframe({ export function AnimatedLikeIcon({ isLiked, big, - isToggle, + hasBeenToggled, }: { isLiked: boolean big?: boolean - isToggle: boolean + hasBeenToggled: boolean }) { const t = useTheme() const size = big ? 22 : 18 - const shouldAnimate = !useReducedMotion() && isToggle + const shouldAnimate = !useReducedMotion() && hasBeenToggled return ( <View> @@ -95,12 +95,10 @@ export function AnimatedLikeIcon({ width={size} /> )} - {isLiked ? ( + {isLiked && shouldAnimate ? ( <> <Animated.View - entering={ - shouldAnimate ? circle1Keyframe.duration(300) : undefined - } + entering={circle1Keyframe.duration(300)} style={{ position: 'absolute', backgroundColor: s.likeColor.color, @@ -114,9 +112,7 @@ export function AnimatedLikeIcon({ }} /> <Animated.View - entering={ - shouldAnimate ? circle2Keyframe.duration(300) : undefined - } + entering={circle2Keyframe.duration(300)} style={{ position: 'absolute', backgroundColor: t.atoms.bg.backgroundColor, |