diff --git a/src/screens/PostThread/components/ThreadAlsoLiked.tsx b/src/screens/PostThread/components/ThreadAlsoLiked.tsx index ec72381af..dfdc9dc1c 100644 --- a/src/screens/PostThread/components/ThreadAlsoLiked.tsx +++ b/src/screens/PostThread/components/ThreadAlsoLiked.tsx @@ -1,12 +1,19 @@ +import {useCallback} from 'react' import {View} from 'react-native' import {type AppBskyFeedDefs} from '@atproto/api' import {Trans, useLingui} from '@lingui/react/macro' +import {useQueryClient} from '@tanstack/react-query' import {cleanError} from '#/lib/strings/errors' +import {unstableCacheProfileView} from '#/state/queries/profile' +import { + buildPostSourceKey, + setUnstablePostSource, +} from '#/state/unstable-post-source' import {Post} from '#/view/com/post/Post' +import {PostLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' -import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' export function ThreadAlsoLiked({ @@ -30,8 +37,18 @@ export function ThreadAlsoLiked({ }) { const {t: l} = useLingui() const t = useTheme() + const queryClient = useQueryClient() const hasSection = enabled && (posts.length > 0 || isLoading || Boolean(error)) + const onBeforePress = useCallback( + (post: AppBskyFeedDefs.PostView) => { + unstableCacheProfileView(queryClient, post.author) + setUnstablePostSource(buildPostSourceKey(post.uri, post.author.handle), { + post: {post}, + }) + }, + [queryClient], + ) return ( @@ -47,13 +64,29 @@ export function ThreadAlsoLiked({ {posts.map((post, index) => ( - + onBeforePress(post)} + /> ))} - {(isLoading || isFetchingNextPage) && ( - - - + {isLoading && posts.length === 0 && ( + <> + + + + )} + + {isFetchingNextPage && ( + )} {Boolean(error) && !isLoading && !isFetchingNextPage && ( diff --git a/src/screens/PostThread/index.tsx b/src/screens/PostThread/index.tsx index b9820668d..33a1b0143 100644 --- a/src/screens/PostThread/index.tsx +++ b/src/screens/PostThread/index.tsx @@ -154,34 +154,13 @@ export function PostThread({uri}: {uri: string}) { 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 alsoLikedEnabled = + Boolean(alsoLikedAnchorUri) && + alsoLikedFeedEnabled && + !thread.state.isPlaceholderData && + !deferParents const alsoLiked = usePostAlsoLikedQuery(alsoLikedAnchorUri, { - enabled: alsoLikedReady, + enabled: alsoLikedEnabled, }) const alsoLikedPosts = useMemo(() => { const seen = new Set() @@ -381,7 +360,7 @@ export function PostThread({uri}: {uri: string}) { } if ( alsoLikedAnchorUri && - alsoLikedReady && + alsoLikedEnabled && !alsoLiked.isLoading && !alsoLiked.isFetchingNextPage && alsoLiked.hasNextPage @@ -659,7 +638,7 @@ export function PostThread({uri}: {uri: string}) { ListFooterComponent={