diff --git a/src/screens/PostThread/index.tsx b/src/screens/PostThread/index.tsx index 54c33f4335..5a9b5f06a9 100644 --- a/src/screens/PostThread/index.tsx +++ b/src/screens/PostThread/index.tsx @@ -2,7 +2,6 @@ import {useMemo, useRef, useState} from 'react' import {useWindowDimensions, View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {runOnJS} from 'react-native-reanimated' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {useOpenComposer} from '#/lib/hooks/useOpenComposer' @@ -17,7 +16,6 @@ import { } from '#/state/queries/usePostThread' import {type OnPostSuccessData} from '#/state/shell/composer' import {PostThreadComposePrompt} from '#/view/com/post-thread/PostThreadComposePrompt' -// import {PostThreadItem} from '#/view/com/post-thread/PostThreadItem' import {PostThreadShowHiddenReplies} from '#/view/com/post-thread/PostThreadShowHiddenReplies' import {List, type ListMethods} from '#/view/com/util/List' import {HeaderDropdown} from '#/screens/PostThread/components/HeaderDropdown' @@ -31,11 +29,10 @@ import {ListFooter} from '#/components/Lists' import {Text} from '#/components/Typography' const PARENT_CHUNK_SIZE = 5 -const CHILD_CHUNK_SIZE = 50 +const REPLIES_CHUNK_SIZE = 50 export function Inner({uri}: {uri: string | undefined}) { const t = useTheme() - const {_} = useLingui() const {gtPhone} = useBreakpoints() // const {hasSession, currentAccount} = useSession() const initialNumToRender = useInitialNumToRender() @@ -149,31 +146,19 @@ export function Inner({uri}: {uri: string | undefined}) { */ const [deferParents, setDeferParents] = useState(isNative) const [maxParentCount, setMaxParentCount] = useState(PARENT_CHUNK_SIZE) - const [maxChildCount, setMaxChildCount] = useState(CHILD_CHUNK_SIZE) + const [maxRepliesCount, setMaxRepliesCount] = useState(REPLIES_CHUNK_SIZE) + const hasExhaustedReplies = useRef(false) - const needsBumpMaxParents = useRef(false) const onStartReached = () => { - setMaxParentCount(n => n + PARENT_CHUNK_SIZE) - // needsBumpMaxParents.current = true + // limit to 100 + setMaxParentCount(n => Math.min(100, n + PARENT_CHUNK_SIZE)) } - // const bumpMaxParentsIfNeeded = () => { - // if (!isNative) { - // return - // } - // if (needsBumpMaxParents.current) { - // needsBumpMaxParents.current = false - // setMaxParentCount(n => n + PARENT_CHUNK_SIZE) - // } - // } - // const onScrollToTop = bumpMaxParentsIfNeeded - // const onMomentumEnd = () => { - // 'worklet' - // runOnJS(bumpMaxParentsIfNeeded)() - // } const onEndReached = () => { if (isFetching) return - setMaxChildCount(prev => prev + CHILD_CHUNK_SIZE) + // prevent any state mutations if we know we're done + if (hasExhaustedReplies.current) return + setMaxRepliesCount(prev => prev + REPLIES_CHUNK_SIZE) } const items = useMemo(() => { @@ -181,7 +166,8 @@ export function Inner({uri}: {uri: string | undefined}) { if (!data?.items) return results - let ci = 0 + let repliesCount = 0 + let totalRepliesCount = 0 for (let i = 0; i < data.items.length; i++) { const item = data.items[i] @@ -198,9 +184,11 @@ export function Inner({uri}: {uri: string | undefined}) { } } } else if (item.depth > 0) { - if (ci <= maxChildCount) { + totalRepliesCount++ + + if (repliesCount <= maxRepliesCount) { results.push(item) - ci++ + repliesCount++ } } } else { @@ -208,8 +196,13 @@ export function Inner({uri}: {uri: string | undefined}) { } } + if (totalRepliesCount < maxRepliesCount) { + hasExhaustedReplies.current = true + } + return results - }, [data, deferParents, maxParentCount, maxChildCount]) + }, [data, deferParents, maxParentCount, maxRepliesCount]) + const renderItem = ({item, index}: {item: Slice; index: number}) => { if (item.type === 'threadPost') { if (item.depth < 0) { @@ -339,7 +332,7 @@ export function Inner({uri}: {uri: string | undefined}) { ) : (