Make shell hide/show animation smoother (#1683)

* Make shell hide/show animation smoother

* Also animate "load latest"

3 files changed, 17 insertions, 8 deletions

diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx
index e28a0e884..2a0a4e4d0 100644
--- a/src/lib/hooks/useMinimalShellMode.tsx
+++ b/src/lib/hooks/useMinimalShellMode.tsx
@@ -7,21 +7,22 @@ export function useMinimalShellMode() {
   const store = useStores()
   const minimalShellInterp = useAnimatedValue(0)
   const footerMinimalShellTransform = {
-    transform: [{translateY: Animated.multiply(minimalShellInterp, 100)}],
+    opacity: Animated.subtract(1, minimalShellInterp),
+    transform: [{translateY: Animated.multiply(minimalShellInterp, 50)}],
   }
 
   React.useEffect(() => {
     if (store.shell.minimalShellMode) {
       Animated.timing(minimalShellInterp, {
         toValue: 1,
-        duration: 100,
+        duration: 150,
         useNativeDriver: true,
         isInteraction: false,
       }).start()
     } else {
       Animated.timing(minimalShellInterp, {
         toValue: 0,
-        duration: 100,
+        duration: 150,
         useNativeDriver: true,
         isInteraction: false,
       }).start()
diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index e39e2dd68..ad1a69cf6 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -24,13 +24,14 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
   React.useEffect(() => {
     Animated.timing(interp, {
       toValue: store.shell.minimalShellMode ? 1 : 0,
-      duration: 100,
+      duration: 150,
       useNativeDriver: true,
       isInteraction: false,
     }).start()
   }, [interp, store.shell.minimalShellMode])
   const transform = {
-    transform: [{translateY: Animated.multiply(interp, -100)}],
+    opacity: Animated.subtract(1, interp),
+    transform: [{translateY: Animated.multiply(interp, -50)}],
   }
 
   const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
index f5d12ce2c..095ebea44 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>
   )
 })