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
parent
f80bd30ef4
commit
9dec9d7276
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue