Profile screen performance tweak - Adjust initial num to render based on header height (#5005)

src/lib/hooks/useInitialNumToRender.ts

@@ -1,11 +1,19 @@
-import React from 'react'
-import {Dimensions} from 'react-native'
+import {useWindowDimensions} from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
 
 const MIN_POST_HEIGHT = 100
 
-export function useInitialNumToRender(minItemHeight: number = MIN_POST_HEIGHT) {
-  return React.useMemo(() => {
-    const screenHeight = Dimensions.get('window').height
-    return Math.ceil(screenHeight / minItemHeight) + 1
-  }, [minItemHeight])
+export function useInitialNumToRender({
+  minItemHeight = MIN_POST_HEIGHT,
+  screenHeightOffset = 0,
+}: {minItemHeight?: number; screenHeightOffset?: number} = {}) {
+  const {height: screenHeight} = useWindowDimensions()
+  const {top: topInset} = useSafeAreaInsets()
+  const bottomBarHeight = useBottomBarOffset()
+
+  const finalHeight =
+    screenHeight - screenHeightOffset - topInset - bottomBarHeight
+  return Math.floor(finalHeight / minItemHeight) + 1
 }

src/screens/Messages/List/index.tsx

@@ -96,7 +96,7 @@ export function MessagesScreen({navigation, route}: Props) {
     )
   }, [_, t])
 
-  const initialNumToRender = useInitialNumToRender(80)
+  const initialNumToRender = useInitialNumToRender({minItemHeight: 80})
   const [isPTRing, setIsPTRing] = useState(false)
 
   const {

src/screens/Profile/Sections/Feed.tsx

@@ -8,6 +8,7 @@ import {isNative} from '#/platform/detection'
 import {FeedDescriptor} from '#/state/queries/post-feed'
 import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
 import {truncateAndInvalidate} from '#/state/queries/util'
+import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Text} from '#/view/com/util/text/Text'
 import {Feed} from 'view/com/posts/Feed'
@@ -42,6 +43,10 @@ export const ProfileFeedSection = React.forwardRef<
   const queryClient = useQueryClient()
   const [hasNew, setHasNew] = React.useState(false)
   const [isScrolledDown, setIsScrolledDown] = React.useState(false)
+  const shouldUseAdjustedNumToRender = feed.endsWith('posts_and_author_threads')
+  const adjustedInitialNumToRender = useInitialNumToRender({
+    screenHeightOffset: headerHeight,
+  })
 
   const onScrollToTop = React.useCallback(() => {
     scrollElRef.current?.scrollToOffset({
@@ -79,7 +84,9 @@ export const ProfileFeedSection = React.forwardRef<
         headerOffset={headerHeight}
         renderEndOfFeed={ProfileEndOfFeed}
         ignoreFilterFor={ignoreFilterFor}
-        outsideHeaderOffset={headerHeight}
+        initialNumToRender={
+          shouldUseAdjustedNumToRender ? adjustedInitialNumToRender : undefined
+        }
       />
       {(isScrolledDown || hasNew) && (
         <LoadLatestBtn

src/view/com/posts/Feed.tsx

@@ -161,6 +161,7 @@ let Feed = ({
   ListHeaderComponent,
   extraData,
   savedFeedConfig,
+  initialNumToRender: initialNumToRenderOverride,
 }: {
   feed: FeedDescriptor
   feedParams?: FeedParams
@@ -180,7 +181,7 @@ let Feed = ({
   ListHeaderComponent?: () => JSX.Element
   extraData?: any
   savedFeedConfig?: AppBskyActorDefs.SavedFeed
-  outsideHeaderOffset?: number
+  initialNumToRender?: number
 }): React.ReactNode => {
   const theme = useTheme()
   const {track} = useAnalytics()
@@ -545,7 +546,7 @@ let Feed = ({
         desktopFixedHeight={
           desktopFixedHeightOffset ? desktopFixedHeightOffset : true
         }
-        initialNumToRender={initialNumToRender}
+        initialNumToRender={initialNumToRenderOverride ?? initialNumToRender}
         windowSize={11}
         onItemSeen={feedFeedback.onItemSeen}
       />