From ceb51c7e8fb5fd6c4dfd9d4384a8a8f126edc0cf Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 4 Apr 2025 18:15:56 +0300
Subject: [Explore] Add flatlist perf-related props (#8120)

* Add flatlist perf-related props

* Make keys more unique

* Small gap

---------

Co-authored-by: Eric Bailey <git@esb.lol>
---
 src/screens/Search/Explore.tsx                 | 10 ++++++++--
 src/screens/Search/components/ModuleHeader.tsx |  2 ++
 src/state/queries/explore-feed-previews.tsx    |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/screens/Search/Explore.tsx b/src/screens/Search/Explore.tsx
index 26e8b36eb..d1ea4be97 100644
--- a/src/screens/Search/Explore.tsx
+++ b/src/screens/Search/Explore.tsx
@@ -8,6 +8,7 @@ import {
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {useGate} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -38,7 +39,7 @@ import {
 import {ExploreRecommendations} from '#/screens/Search/modules/ExploreRecommendations'
 import {ExploreTrendingTopics} from '#/screens/Search/modules/ExploreTrendingTopics'
 import {ExploreTrendingVideos} from '#/screens/Search/modules/ExploreTrendingVideos'
-import {atoms as a, native, useTheme, web} from '#/alf'
+import {atoms as a, native, platform, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
@@ -190,6 +191,7 @@ export function Explore({
 }) {
   const {_} = useLingui()
   const t = useTheme()
+  const initialNumToRender = useInitialNumToRender()
   const {data: preferences, error: preferencesError} = usePreferencesQuery()
   const moderationOpts = useModerationOpts()
   const gate = useGate()
@@ -923,7 +925,11 @@ export function Explore({
       viewabilityConfig={viewabilityConfig}
       onViewableItemsChanged={onViewableItemsChanged}
       onEndReached={onLoadMoreFeedPreviews}
-      onEndReachedThreshold={2}
+      onEndReachedThreshold={3}
+      initialNumToRender={initialNumToRender}
+      windowSize={9}
+      maxToRenderPerBatch={platform({ios: 5, default: 1})}
+      updateCellsBatchingPeriod={40}
     />
   )
 }
diff --git a/src/screens/Search/components/ModuleHeader.tsx b/src/screens/Search/components/ModuleHeader.tsx
index cbd0a856b..c965046a6 100644
--- a/src/screens/Search/components/ModuleHeader.tsx
+++ b/src/screens/Search/components/ModuleHeader.tsx
@@ -41,6 +41,8 @@ export function Container({
         headerHeight && web({position: 'sticky', top: headerHeight}),
         style,
       ]}>
+      {/* Very non-scientific way to avoid small gap on scroll */}
+      <View style={[a.absolute, a.inset_0, t.atoms.bg, {top: -2}]} />
       {children}
     </View>
   )
diff --git a/src/state/queries/explore-feed-previews.tsx b/src/state/queries/explore-feed-previews.tsx
index 4a13723e3..eaa343cec 100644
--- a/src/state/queries/explore-feed-previews.tsx
+++ b/src/state/queries/explore-feed-previews.tsx
@@ -173,7 +173,7 @@ export function useFeedPreviews(
               })
 
               const slice = {
-                _reactKey: item._reactKey,
+                _reactKey: page.feed.uri + item._reactKey,
                 _isFeedPostSlice: true,
                 isFallbackMarker: false,
                 isIncompleteThread: item.isIncompleteThread,
-- 
cgit 1.4.1