Only poll feed when feed page is focused (#2064)

* Do no poll when screen is not focused

* Avoid polling unless focused

* Handle homepage in background

* Fix the intl:check to ignore comments in diffs

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
zio/stable
Eric Bailey 2023-12-01 15:40:50 -06:00 committed by GitHub
parent f80bd30ef4
commit 9dec9d7276
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 26 additions and 13 deletions

View File

@ -30,7 +30,7 @@
"perf:test:results": "NODE_ENV=test flashlight report .perf/results.json",
"perf:measure": "NODE_ENV=test flashlight measure",
"intl:build": "yarn intl:check && yarn intl:compile",
"intl:check": "yarn intl:extract && git diff-index --quiet HEAD || (echo '\n⚠ i18n detected un-extracted translations\n' && exit 1)",
"intl:check": "yarn intl:extract && git diff-index -G'(^[^\\*# /])|(^#\\w)|(^\\s+[^\\*#/])' HEAD || (echo '\n⚠ i18n detected un-extracted translations\n' && exit 1)",
"intl:extract": "lingui extract",
"intl:compile": "lingui compile"
},

View File

@ -158,9 +158,9 @@ export function FeedPage({
<View testID={testID} style={s.h100pct}>
<Feed
testID={testID ? `${testID}-feed` : undefined}
enabled={isPageFocused}
feed={feed}
feedParams={feedParams}
enabled={isPageFocused}
pollInterval={POLL_FREQ}
scrollElRef={scrollElRef}
onScroll={onMainScroll}

View File

@ -89,7 +89,7 @@ let Feed = ({
const isEmpty = !isFetching && !data?.pages[0]?.slices.length
const checkForNew = React.useCallback(async () => {
if (!data?.pages[0] || isFetching || !onHasNew) {
if (!data?.pages[0] || isFetching || !onHasNew || !enabled) {
return
}
try {
@ -99,7 +99,7 @@ let Feed = ({
} catch (e) {
logger.error('Poll latest failed', {feed, error: String(e)})
}
}, [feed, data, isFetching, onHasNew])
}, [feed, data, isFetching, onHasNew, enabled])
React.useEffect(() => {
// we store the interval handler in a ref to avoid needless

View File

@ -1,6 +1,6 @@
import React from 'react'
import {View, ActivityIndicator, StyleSheet} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {useFocusEffect, useIsFocused} from '@react-navigation/native'
import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
@ -39,6 +39,7 @@ function HomeScreenReady({
const setMinimalShellMode = useSetMinimalShellMode()
const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
const [selectedPage, setSelectedPage] = React.useState(0)
const isPageFocused = useIsFocused()
/**
* Used to ensure that we re-compute `customFeeds` AND force a re-render of
@ -132,7 +133,7 @@ function HomeScreenReady({
<FeedPage
key="1"
testID="followingFeedPage"
isPageFocused={selectedPage === 0}
isPageFocused={selectedPage === 0 && isPageFocused}
feed={homeFeedParams.mergeFeedEnabled ? 'home' : 'following'}
feedParams={homeFeedParams}
renderEmptyState={renderFollowingEmptyState}
@ -143,7 +144,7 @@ function HomeScreenReady({
<FeedPage
key={f}
testID="customFeedPage"
isPageFocused={selectedPage === 1 + index}
isPageFocused={selectedPage === 1 + index && isPageFocused}
feed={f}
renderEmptyState={renderCustomFeedEmptyState}
/>
@ -159,7 +160,7 @@ function HomeScreenReady({
tabBarPosition="top">
<FeedPage
testID="customFeedPage"
isPageFocused
isPageFocused={isPageFocused}
feed={`feedgen|at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot`}
renderEmptyState={renderCustomFeedEmptyState}
/>

View File

@ -420,6 +420,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
<View>
<Feed
testID="postsFeed"
enabled={isFocused}
feed={feed}
pollInterval={30e3}
scrollElRef={scrollElRef}
@ -428,7 +429,6 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
scrollEventThrottle={1}
renderEmptyState={renderPostsEmpty}
headerOffset={headerHeight}
enabled={isFocused}
/>
{(isScrolledDown || hasNew) && (
<LoadLatestBtn

View File

@ -402,7 +402,7 @@ export function ProfileFeedScreenInner({
isHeaderReady={true}
renderHeader={renderHeader}
onCurrentPageSelected={onCurrentPageSelected}>
{({onScroll, headerHeight, isScrolledDown, scrollElRef}) =>
{({onScroll, headerHeight, isScrolledDown, scrollElRef, isFocused}) =>
isPublic ? (
<FeedSection
ref={feedSectionRef}
@ -413,6 +413,7 @@ export function ProfileFeedScreenInner({
scrollElRef={
scrollElRef as React.MutableRefObject<FlatList<any> | null>
}
isFocused={isFocused}
/>
) : (
<CenteredView sideBorders style={[{paddingTop: headerHeight}]}>
@ -492,10 +493,11 @@ interface FeedSectionProps {
headerHeight: number
isScrolledDown: boolean
scrollElRef: React.MutableRefObject<FlatList<any> | null>
isFocused: boolean
}
const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
function FeedSectionImpl(
{feed, onScroll, headerHeight, isScrolledDown, scrollElRef},
{feed, onScroll, headerHeight, isScrolledDown, scrollElRef, isFocused},
ref,
) {
const [hasNew, setHasNew] = React.useState(false)
@ -518,6 +520,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
return (
<View>
<Feed
enabled={isFocused}
feed={feed}
pollInterval={30e3}
scrollElRef={scrollElRef}

View File

@ -159,7 +159,13 @@ function ProfileListScreenLoaded({
isHeaderReady={true}
renderHeader={renderHeader}
onCurrentPageSelected={onCurrentPageSelected}>
{({onScroll, headerHeight, isScrolledDown, scrollElRef}) => (
{({
onScroll,
headerHeight,
isScrolledDown,
scrollElRef,
isFocused,
}) => (
<FeedSection
ref={feedSectionRef}
feed={`list|${uri}`}
@ -169,6 +175,7 @@ function ProfileListScreenLoaded({
onScroll={onScroll}
headerHeight={headerHeight}
isScrolledDown={isScrolledDown}
isFocused={isFocused}
/>
)}
{({onScroll, headerHeight, isScrolledDown, scrollElRef}) => (
@ -519,10 +526,11 @@ interface FeedSectionProps {
headerHeight: number
isScrolledDown: boolean
scrollElRef: React.MutableRefObject<FlatList<any> | null>
isFocused: boolean
}
const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
function FeedSectionImpl(
{feed, scrollElRef, onScroll, headerHeight, isScrolledDown},
{feed, scrollElRef, onScroll, headerHeight, isScrolledDown, isFocused},
ref,
) {
const queryClient = useQueryClient()
@ -545,6 +553,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
<View>
<Feed
testID="listFeed"
enabled={isFocused}
feed={feed}
pollInterval={30e3}
scrollElRef={scrollElRef}