Make shell hide/show animation smoother (#1683)

* Make shell hide/show animation smoother

* Also animate "load latest"

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>
   )
 })