Performance optimization (#1676)

* upgrade sentry to support profiling monitoring

* remove console logs in production builds

* feeds tab bar and bottom bar animation centralized

* refactor FeedPage out of Home

* add script to start in production mode

* move FAB inner to reanimated

* move FABInner back to `Animated` RN animation

* add perf commands

* add testing with Maestro and perf with Flashlight

* fix merge conflicts

* fix resourceClass name in eas.json

* fix onEndReachedThreshold in Feed

* memoize styles

* go back to old styling for LoadLatestBtn

* remove reanimated code from useMinimalShellMode

* move shell animations to hook/reanimated for perf

* fix empty state issue

* make shell animation feel smoother

* make shell animation more smooth

* run animation with autorun

* specify keys for tab bar properly

* remove comments

* remove already imported dep

* fix lint

* add testing instructions

* mock sentry-expo for jest

* fix jest mocks

* Fix the load-latest button on desktop and tablet

* Fix: don't move the FAB in tablet mode

* Fix type error

* Fix tabs bar positioning on tablet

* Fix types

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/pager/FeedsTabBar.web.tsx

@@ -1,13 +1,14 @@
 import React, {useMemo} from 'react'
-import {Animated, StyleSheet} from 'react-native'
+import {StyleSheet} from 'react-native'
+import Animated from 'react-native-reanimated'
 import {observer} from 'mobx-react-lite'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 
 export const FeedsTabBar = observer(function FeedsTabBarImpl(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
@@ -31,26 +32,12 @@ const FeedsTabBarTablet = observer(function FeedsTabBarTabletImpl(
     [store.me.savedFeeds.pinnedFeedNames],
   )
   const pal = usePalette('default')
-  const interp = useAnimatedValue(0)
-
-  React.useEffect(() => {
-    Animated.timing(interp, {
-      toValue: store.shell.minimalShellMode ? 1 : 0,
-      duration: 100,
-      useNativeDriver: true,
-      isInteraction: false,
-    }).start()
-  }, [interp, store.shell.minimalShellMode])
-  const transform = {
-    transform: [
-      {translateX: '-50%'},
-      {translateY: Animated.multiply(interp, -100)},
-    ],
-  }
+  const {headerMinimalShellTransform} = useMinimalShellMode()
 
   return (
     // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
-    <Animated.View style={[pal.view, styles.tabBar, transform]}>
+    <Animated.View
+      style={[pal.view, styles.tabBar, headerMinimalShellTransform]}>
       <TabBar
         key={items.join(',')}
         {...props}
@@ -65,7 +52,8 @@ const styles = StyleSheet.create({
   tabBar: {
     position: 'absolute',
     zIndex: 1,
-    left: '50%',
+    // @ts-ignore Web only -prf
+    left: 'calc(50% - 299px)',
     width: 598,
     top: 0,
     flexDirection: 'row',

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -1,12 +1,10 @@
 import React, {useMemo} from 'react'
-import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {autorun} from 'mobx'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
@@ -14,30 +12,17 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {s} from 'lib/styles'
 import {HITSLOP_10} from 'lib/constants'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import Animated from 'react-native-reanimated'
 
 export const FeedsTabBar = observer(function FeedsTabBarImpl(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
   const store = useStores()
   const pal = usePalette('default')
-  const interp = useAnimatedValue(0)
-
-  React.useEffect(() => {
-    return autorun(() => {
-      Animated.timing(interp, {
-        toValue: store.shell.minimalShellMode ? 1 : 0,
-        duration: 150,
-        useNativeDriver: true,
-        isInteraction: false,
-      }).start()
-    })
-  }, [interp, store])
-  const transform = {
-    opacity: Animated.subtract(1, interp),
-    transform: [{translateY: Animated.multiply(interp, -50)}],
-  }
 
   const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
+  const {headerMinimalShellTransform} = useMinimalShellMode()
 
   const onPressAvi = React.useCallback(() => {
     store.shell.openDrawer()
@@ -48,13 +33,17 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
     [store.me.savedFeeds.pinnedFeedNames],
   )
 
+  const tabBarKey = useMemo(() => {
+    return items.join(',')
+  }, [items])
+
   return (
     <Animated.View
       style={[
         pal.view,
         pal.border,
         styles.tabBar,
-        transform,
+        headerMinimalShellTransform,
         store.shell.minimalShellMode && styles.disabled,
       ]}>
       <View style={[pal.view, styles.topBar]}>
@@ -92,8 +81,11 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
         </View>
       </View>
       <TabBar
-        key={items.join(',')}
-        {...props}
+        key={tabBarKey}
+        onPressSelected={props.onPressSelected}
+        selectedPage={props.selectedPage}
+        onSelect={props.onSelect}
+        testID={props.testID}
         items={items}
         indicatorColor={pal.colors.link}
       />

src/view/com/pager/TabBar.tsx

@@ -64,6 +64,7 @@ export function TabBar({
   )
 
   const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
+
   return (
     <View testID={testID} style={[pal.view, styles.outer]}>
       <DraggableScrollView