From f95acdc8363f78618517c999fdc4f10ab6c20fa2 Mon Sep 17 00:00:00 2001
From: khuddite <khuddite@gmail.com>
Date: Wed, 6 Nov 2024 07:36:31 -0500
Subject: 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>
---
 src/lib/custom-animations/LikeIcon.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

(limited to 'src/lib/custom-animations/LikeIcon.tsx')

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,
-- 
cgit 1.4.1