Reduce window size for adjacent but never-focused feed pages
Track whether each feed page has been focused at least once. For adjacent pages that are only prefetching (never viewed by the user), use windowSize=1 to minimize rendering overhead. Once a page has been focused, it keeps the default windowSize=9 for smooth swiping. https://claude.ai/code/session_01SJL2SqcPnJo7wbhku6SFt5
This commit is contained in:
@@ -75,6 +75,10 @@ export function FeedPage({
|
|||||||
const feedFeedback = useFeedFeedback(feedInfo, hasSession)
|
const feedFeedback = useFeedFeedback(feedInfo, hasSession)
|
||||||
const scrollElRef = useRef<ListMethods>(null)
|
const scrollElRef = useRef<ListMethods>(null)
|
||||||
const [hasNew, setHasNew] = useState(false)
|
const [hasNew, setHasNew] = useState(false)
|
||||||
|
const [hasBeenFocused, setHasBeenFocused] = useState(isPageFocused)
|
||||||
|
if (isPageFocused && !hasBeenFocused) {
|
||||||
|
setHasBeenFocused(true)
|
||||||
|
}
|
||||||
const setHomeBadge = useSetHomeBadge()
|
const setHomeBadge = useSetHomeBadge()
|
||||||
const isVideoFeed = useMemo(() => {
|
const isVideoFeed = useMemo(() => {
|
||||||
const isBskyVideoFeed = VIDEO_FEED_URIS.includes(feedInfo.uri)
|
const isBskyVideoFeed = VIDEO_FEED_URIS.includes(feedInfo.uri)
|
||||||
@@ -138,6 +142,8 @@ export function FeedPage({
|
|||||||
}, [ax, scrollToTop, feed, queryClient])
|
}, [ax, scrollToTop, feed, queryClient])
|
||||||
|
|
||||||
const shouldPrefetch = IS_NATIVE && isPageAdjacent
|
const shouldPrefetch = IS_NATIVE && isPageAdjacent
|
||||||
|
const windowSize =
|
||||||
|
isPageAdjacent && !hasBeenFocused ? 1 : undefined
|
||||||
const isDiscoverFeed = feedInfo.uri === DISCOVER_FEED_URI
|
const isDiscoverFeed = feedInfo.uri === DISCOVER_FEED_URI
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
@@ -161,6 +167,7 @@ export function FeedPage({
|
|||||||
headerOffset={headerOffset}
|
headerOffset={headerOffset}
|
||||||
savedFeedConfig={savedFeedConfig}
|
savedFeedConfig={savedFeedConfig}
|
||||||
isVideoFeed={isVideoFeed}
|
isVideoFeed={isVideoFeed}
|
||||||
|
windowSize={windowSize}
|
||||||
/>
|
/>
|
||||||
</FeedFeedbackProvider>
|
</FeedFeedbackProvider>
|
||||||
</MainScrollProvider>
|
</MainScrollProvider>
|
||||||
|
|||||||
@@ -203,6 +203,7 @@ let PostFeed = ({
|
|||||||
savedFeedConfig,
|
savedFeedConfig,
|
||||||
initialNumToRender: initialNumToRenderOverride,
|
initialNumToRender: initialNumToRenderOverride,
|
||||||
isVideoFeed = false,
|
isVideoFeed = false,
|
||||||
|
windowSize: windowSizeOverride,
|
||||||
}: {
|
}: {
|
||||||
feed: FeedDescriptor
|
feed: FeedDescriptor
|
||||||
feedParams?: FeedParams
|
feedParams?: FeedParams
|
||||||
@@ -225,6 +226,7 @@ let PostFeed = ({
|
|||||||
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
||||||
initialNumToRender?: number
|
initialNumToRender?: number
|
||||||
isVideoFeed?: boolean
|
isVideoFeed?: boolean
|
||||||
|
windowSize?: number
|
||||||
lastFetchDate?: () => number
|
lastFetchDate?: () => number
|
||||||
}): React.ReactNode => {
|
}): React.ReactNode => {
|
||||||
const ax = useAnalytics()
|
const ax = useAnalytics()
|
||||||
@@ -1015,7 +1017,7 @@ let PostFeed = ({
|
|||||||
desktopFixedHeightOffset ? desktopFixedHeightOffset : true
|
desktopFixedHeightOffset ? desktopFixedHeightOffset : true
|
||||||
}
|
}
|
||||||
initialNumToRender={initialNumToRenderOverride ?? initialNumToRender}
|
initialNumToRender={initialNumToRenderOverride ?? initialNumToRender}
|
||||||
windowSize={9}
|
windowSize={windowSizeOverride ?? 9}
|
||||||
maxToRenderPerBatch={IS_IOS ? 5 : 1}
|
maxToRenderPerBatch={IS_IOS ? 5 : 1}
|
||||||
updateCellsBatchingPeriod={40}
|
updateCellsBatchingPeriod={40}
|
||||||
onItemSeen={onItemSeen}
|
onItemSeen={onItemSeen}
|
||||||
|
|||||||
Reference in New Issue
Block a user