zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Performance optimization (#1676)

Browse source 
* 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>
This commit is contained in:
Ansh 2023-10-13 18:54:35 -07:00 • committed by GitHub
parent 9042f503c2
commit 8e9cf182c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 584 additions and 374 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/view/com/util/load-latest/LoadLatestBtn.tsx
View file

@ -2,16 +2,12 @@ import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
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'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated'
const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
@ -23,20 +19,11 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
onPress: () => void
label: string
showIndicator: boolean
minimalShellMode?: boolean // NOTE not used on mobile -prf
}) {
const store = useStores()
const pal = usePalette('default')
const {isDesktop, isTablet} = useWebMediaQueries()
const safeAreaInsets = useSafeAreaInsets()
const minMode = store.shell.minimalShellMode
const bottom = isTablet
? 50
: (minMode || isDesktop ? 16 : 60) +
(isWeb ? 20 : clamp(safeAreaInsets.bottom, 15, 60))
const animatedStyle = useAnimatedStyle(() => ({
bottom: withTiming(bottom, {duration: 150}),
}))
const {isDesktop, isTablet, isMobile} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode()
return (
<AnimatedTouchableOpacity
style={[
@ -45,7 +32,7 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
isTablet && styles.loadLatestTablet,
pal.borderDark,
pal.view,
animatedStyle,
isMobile && fabMinimalShellTransform,
]}
onPress={onPress}
hitSlop={HITSLOP_20}
@ -73,13 +60,11 @@ const styles = StyleSheet.create({
},
loadLatestTablet: {
// @ts-ignore web only
left: '50vw',
transform: [{translateX: -282}],
left: 'calc(50vw - 282px)',
},
loadLatestDesktop: {
// @ts-ignore web only
left: '50vw',
transform: [{translateX: -382}],
left: 'calc(50vw - 382px)',
},
indicator: {
position: 'absolute',