From c8e27c4efc7351f70b381dfa3c1d30ae40ac6315 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 12 Oct 2023 20:50:05 +0100
Subject: [PATCH] Also animate "load latest"

---
 src/view/com/util/load-latest/LoadLatestBtn.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
index f5d12ce2c1..095ebea448 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx
@@ -10,6 +10,10 @@ import {colors} from 'lib/styles'
 import {HITSLOP_20} from 'lib/constants'
 import {isWeb} from 'platform/detection'
 import {clamp} from 'lib/numbers'
+import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
+
+const AnimatedTouchableOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity)
 
 export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
   onPress,
@@ -30,15 +34,18 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
     ? 50
     : (minMode || isDesktop ? 16 : 60) +
       (isWeb ? 20 : clamp(safeAreaInsets.bottom, 15, 60))
+  const animatedStyle = useAnimatedStyle(() => ({
+    bottom: withTiming(bottom, {duration: 150}),
+  }))
   return (
-    <TouchableOpacity
+    <AnimatedTouchableOpacity
       style={[
         styles.loadLatest,
         isDesktop && styles.loadLatestDesktop,
         isTablet && styles.loadLatestTablet,
         pal.borderDark,
         pal.view,
-        {bottom},
+        animatedStyle,
       ]}
       onPress={onPress}
       hitSlop={HITSLOP_20}
@@ -47,7 +54,7 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
       accessibilityHint="">
       <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
       {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
-    </TouchableOpacity>
+    </AnimatedTouchableOpacity>
   )
 })