forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Profile screen performance tweak - Adjust initial num to render based on header height (#5005)
+27
-11
+15
-7
src/lib/hooks/useInitialNumToRender.ts
+15
-7
src/lib/hooks/useInitialNumToRender.ts
···
1
-
import React from 'react'
2
-
import {Dimensions} from 'react-native'
1
+
import {useWindowDimensions} from 'react-native'
2
+
import {useSafeAreaInsets} from 'react-native-safe-area-context'
3
+
4
+
import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
3
5
4
6
const MIN_POST_HEIGHT = 100
5
7
6
-
export function useInitialNumToRender(minItemHeight: number = MIN_POST_HEIGHT) {
7
-
return React.useMemo(() => {
8
-
const screenHeight = Dimensions.get('window').height
9
-
return Math.ceil(screenHeight / minItemHeight) + 1
10
-
}, [minItemHeight])
8
+
export function useInitialNumToRender({
9
+
minItemHeight = MIN_POST_HEIGHT,
10
+
screenHeightOffset = 0,
11
+
}: {minItemHeight?: number; screenHeightOffset?: number} = {}) {
12
+
const {height: screenHeight} = useWindowDimensions()
13
+
const {top: topInset} = useSafeAreaInsets()
14
+
const bottomBarHeight = useBottomBarOffset()
15
+
16
+
const finalHeight =
17
+
screenHeight - screenHeightOffset - topInset - bottomBarHeight
18
+
return Math.floor(finalHeight / minItemHeight) + 1
11
19
}
+1
-1
src/screens/Messages/List/index.tsx
+1
-1
src/screens/Messages/List/index.tsx
+8
-1
src/screens/Profile/Sections/Feed.tsx
+8
-1
src/screens/Profile/Sections/Feed.tsx
···
8
8
import {FeedDescriptor} from '#/state/queries/post-feed'
9
9
import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
10
10
import {truncateAndInvalidate} from '#/state/queries/util'
11
+
import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
11
12
import {usePalette} from 'lib/hooks/usePalette'
12
13
import {Text} from '#/view/com/util/text/Text'
13
14
import {Feed} from 'view/com/posts/Feed'
···
42
43
const queryClient = useQueryClient()
43
44
const [hasNew, setHasNew] = React.useState(false)
44
45
const [isScrolledDown, setIsScrolledDown] = React.useState(false)
46
+
const shouldUseAdjustedNumToRender = feed.endsWith('posts_and_author_threads')
47
+
const adjustedInitialNumToRender = useInitialNumToRender({
48
+
screenHeightOffset: headerHeight,
49
+
})
45
50
46
51
const onScrollToTop = React.useCallback(() => {
47
52
scrollElRef.current?.scrollToOffset({
···
79
84
headerOffset={headerHeight}
80
85
renderEndOfFeed={ProfileEndOfFeed}
81
86
ignoreFilterFor={ignoreFilterFor}
82
-
outsideHeaderOffset={headerHeight}
87
+
initialNumToRender={
88
+
shouldUseAdjustedNumToRender ? adjustedInitialNumToRender : undefined
89
+
}
83
90
/>
84
91
{(isScrolledDown || hasNew) && (
85
92
<LoadLatestBtn
+3
-2
src/view/com/posts/Feed.tsx
+3
-2
src/view/com/posts/Feed.tsx
···
161
161
ListHeaderComponent,
162
162
extraData,
163
163
savedFeedConfig,
164
+
initialNumToRender: initialNumToRenderOverride,
164
165
}: {
165
166
feed: FeedDescriptor
166
167
feedParams?: FeedParams
···
180
181
ListHeaderComponent?: () => JSX.Element
181
182
extraData?: any
182
183
savedFeedConfig?: AppBskyActorDefs.SavedFeed
183
-
outsideHeaderOffset?: number
184
+
initialNumToRender?: number
184
185
}): React.ReactNode => {
185
186
const theme = useTheme()
186
187
const {track} = useAnalytics()
···
545
546
desktopFixedHeight={
546
547
desktopFixedHeightOffset ? desktopFixedHeightOffset : true
547
548
}
548
-
initialNumToRender={initialNumToRender}
549
+
initialNumToRender={initialNumToRenderOverride ?? initialNumToRender}
549
550
windowSize={11}
550
551
onItemSeen={feedFeedback.onItemSeen}
551
552
/>