Don't load remote hidden items unless needed

This commit is contained in:
Eric Bailey
2025-06-04 11:14:59 -05:00
parent ce776fd050
commit b7e5e10ea7
2 changed files with 29 additions and 20 deletions
+26 -17
View File
@@ -100,9 +100,11 @@ export function usePostThread({anchor}: {anchor?: string}) {
}, },
}) })
const hasHiddenReplies = !!query.data?.hasHiddenReplies const hasServerHiddenReplies = !!query.data?.hasHiddenReplies
const [hiddenRepliesVisible, setHiddenRepliesVisible] = useState(false) const [hiddenRepliesVisible, setHiddenRepliesVisible] = useState(false)
const [hiddenItems, setHiddenItems] = useState<ThreadItem[]>([]) const [additionalHiddenItems, setAdditionalHiddenItems] = useState<
ThreadItem[]
>([])
/** /**
* Loads hidden replies for this thread. Any replies that are moderated from * Loads hidden replies for this thread. Any replies that are moderated from
@@ -110,10 +112,18 @@ export function usePostThread({anchor}: {anchor?: string}) {
* fetched and inserted when it's available. * fetched and inserted when it's available.
*/ */
const loadHiddenReplies = useCallback(async () => { const loadHiddenReplies = useCallback(async () => {
// immediately show any moderated replies already in memory /*
* Show any moderated replies already in memory that were handled here on
* the client. If there are server-hidden replies, we'll fetch those next.
*/
setHiddenRepliesVisible(true) setHiddenRepliesVisible(true)
// add skeletons for the replies that will be loaded
setHiddenItems( /*
* If there are no server hidden replies, just stop here.
*/
if (!hasServerHiddenReplies) return
setAdditionalHiddenItems(
Array.from({length: 2}).map((_, i) => ({ Array.from({length: 2}).map((_, i) => ({
type: 'skeleton', type: 'skeleton',
key: `${anchor!}-reply-${i}`, key: `${anchor!}-reply-${i}`,
@@ -121,18 +131,17 @@ export function usePostThread({anchor}: {anchor?: string}) {
})), })),
) )
const queryParams = { const params = {
anchor: anchor!, anchor: anchor!,
prioritizeFollowedUsers: prioritizeFollowedUsers, prioritizeFollowedUsers,
} }
const data = await wait( const data = await wait(
400, 400,
qc.fetchQuery({ qc.fetchQuery({
queryKey: createPostThreadHiddenQueryKey(queryParams), queryKey: createPostThreadHiddenQueryKey(params),
async queryFn() { async queryFn() {
const {data} = await agent.app.bsky.unspecced.getPostThreadHiddenV2( const {data} = await agent.app.bsky.unspecced.getPostThreadHiddenV2(
queryParams, params,
) )
return data.thread || [] return data.thread || []
}, },
@@ -146,14 +155,14 @@ export function usePostThread({anchor}: {anchor?: string}) {
moderationOpts: moderationOpts!, moderationOpts: moderationOpts!,
hasSession, hasSession,
view, view,
hasHiddenReplies, hasServerHiddenReplies,
hiddenRepliesVisible, hiddenRepliesVisible,
skipHiddenReplyHandling: true, skipHiddenReplyHandling: true,
loadHiddenReplies, loadHiddenReplies,
}) })
// insert the hidden replies into the state // insert the hidden replies into the state
setHiddenItems(items) setAdditionalHiddenItems(items)
}, [ }, [
agent, agent,
view, view,
@@ -164,7 +173,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
moderationOpts, moderationOpts,
qc, qc,
query.data?.threadgate?.record, query.data?.threadgate?.record,
hasHiddenReplies, hasServerHiddenReplies,
hiddenRepliesVisible, hiddenRepliesVisible,
setHiddenRepliesVisible, setHiddenRepliesVisible,
]) ])
@@ -177,22 +186,22 @@ export function usePostThread({anchor}: {anchor?: string}) {
moderationOpts: moderationOpts!, moderationOpts: moderationOpts!,
hasSession, hasSession,
view: view, view: view,
hasHiddenReplies, hasServerHiddenReplies,
hiddenRepliesVisible, hiddenRepliesVisible,
loadHiddenReplies, loadHiddenReplies,
}) })
return results.concat(hiddenItems) return results.concat(additionalHiddenItems)
}, [ }, [
query.data, query.data,
mergeThreadgateHiddenReplies, mergeThreadgateHiddenReplies,
moderationOpts, moderationOpts,
hasSession, hasSession,
view, view,
hasHiddenReplies, hasServerHiddenReplies,
hiddenRepliesVisible, hiddenRepliesVisible,
loadHiddenReplies, loadHiddenReplies,
hiddenItems, additionalHiddenItems,
]) ])
if (query.isPlaceholderData) { if (query.isPlaceholderData) {
+3 -3
View File
@@ -25,7 +25,7 @@ export function traverse(
moderationOpts, moderationOpts,
hasSession, hasSession,
view, view,
hasHiddenReplies, hasServerHiddenReplies,
hiddenRepliesVisible, hiddenRepliesVisible,
skipHiddenReplyHandling, skipHiddenReplyHandling,
loadHiddenReplies, loadHiddenReplies,
@@ -34,7 +34,7 @@ export function traverse(
moderationOpts: ModerationOpts moderationOpts: ModerationOpts
hasSession: boolean hasSession: boolean
view: PostThreadParams['view'] view: PostThreadParams['view']
hasHiddenReplies: boolean hasServerHiddenReplies: boolean
hiddenRepliesVisible: boolean hiddenRepliesVisible: boolean
skipHiddenReplyHandling?: boolean skipHiddenReplyHandling?: boolean
loadHiddenReplies: () => Promise<void> loadHiddenReplies: () => Promise<void>
@@ -240,7 +240,7 @@ export function traverse(
} }
if (!skipHiddenReplyHandling) { if (!skipHiddenReplyHandling) {
if (hidden.length || hasHiddenReplies) { if (hidden.length || hasServerHiddenReplies) {
if (hiddenRepliesVisible) { if (hiddenRepliesVisible) {
items.push(...hidden) items.push(...hidden)
} else { } else {