diff --git a/src/screens/PostThread/index.tsx b/src/screens/PostThread/index.tsx --- a/src/screens/PostThread/index.tsx +++ b/src/screens/PostThread/index.tsx @@ -153,8 +153,35 @@ const alsoLikedFeedEnabled = useAlsoLikedFeedEnabled() const alsoLikedAnchorUri = anchor?.type === 'threadPost' && isRoot ? anchor.value.post.uri : undefined + const [deferParents, setDeferParents] = useState(true) + const [alsoLikedReady, setAlsoLikedReady] = useState(false) + useEffect(() => { + const shouldEnable = + Boolean(alsoLikedAnchorUri) && + alsoLikedFeedEnabled && + !thread.state.isPlaceholderData && + !deferParents + + if (!shouldEnable) { + setAlsoLikedReady(false) + return + } + + const timeout = setTimeout(() => { + startTransition(() => { + setAlsoLikedReady(true) + }) + }, 0) + + return () => clearTimeout(timeout) + }, [ + alsoLikedAnchorUri, + alsoLikedFeedEnabled, + deferParents, + thread.state.isPlaceholderData, + ]) const alsoLiked = usePostAlsoLikedQuery(alsoLikedAnchorUri, { - enabled: Boolean(alsoLikedAnchorUri) && alsoLikedFeedEnabled, + enabled: alsoLikedReady, }) const alsoLikedPosts = useMemo(() => { const seen = new Set() @@ -188,7 +215,6 @@ * On web, `onContentSizeChange` is used to get ahead of next paint and handle * this scrolling. */ - const [deferParents, setDeferParents] = useState(true) /** * Used to flag whether we should scroll to the anchor post. On a cold load, * this is always true. And when a user changes thread parameters, we also @@ -355,7 +381,7 @@ } if ( alsoLikedAnchorUri && - alsoLikedFeedEnabled && + alsoLikedReady && !alsoLiked.isLoading && !alsoLiked.isFetchingNextPage && alsoLiked.hasNextPage @@ -633,7 +659,7 @@ ListFooterComponent={ [post.uri, post] as const), ) + + for (const post of postsRes.data.posts) { + precachePost(queryClient, post.uri, post) + } return { cursor: data.cursor, diff --git a/src/state/queries/post.ts b/src/state/queries/post.ts --- a/src/state/queries/post.ts +++ b/src/state/queries/post.ts @@ -57,6 +57,16 @@ queryClient.setQueryData(RQKEY(uri), post) } +export function* findAllPostsInQueryData( + queryClient: QueryClient, + uri: string, +): Generator { + const post = queryClient.getQueryData(RQKEY(uri)) + if (post) { + yield post + } +} + export function useGetPost() { const queryClient = useQueryClient() const agent = useAgent()