diff --git a/src/state/queries/usePostThread/index.ts b/src/state/queries/usePostThread/index.ts index 5d64f70e99..43edffb4d0 100644 --- a/src/state/queries/usePostThread/index.ts +++ b/src/state/queries/usePostThread/index.ts @@ -261,15 +261,17 @@ export function usePostThread({anchor}: {anchor?: string}) { * of server-hidden replies. */ const items = useMemo(() => { + const result = [...threadItems] + if (query.isPlaceholderData) { - const anchorPost = threadItems.at(0) + const anchorPost = result.at(0) const skeletonReplies = anchorPost && anchorPost.type === 'threadPost' ? anchorPost?.value.post.replyCount ?? 4 : 4 - if (!threadItems.length) { - threadItems.push( + if (!result.length) { + result.push( views.skeleton({ key: anchor!, item: 'anchor', @@ -277,7 +279,7 @@ export function usePostThread({anchor}: {anchor?: string}) { ) if (hasSession) { - threadItems.push( + result.push( views.skeleton({ key: 'replyComposer', item: 'replyComposer', @@ -287,7 +289,7 @@ export function usePostThread({anchor}: {anchor?: string}) { } for (let i = 0; i < skeletonReplies; i++) { - threadItems.push( + result.push( views.skeleton({ key: `${anchor!}-reply-${i}`, item: 'reply', @@ -295,9 +297,15 @@ export function usePostThread({anchor}: {anchor?: string}) { ) } - return threadItems + return result } else { - return threadItems.concat(additionalHiddenItems) + result.push(...additionalHiddenItems) + result.push({ + type: 'bookend', + key: 'bookend-down', + direction: 'down', + }) + return result } }, [ query.isPlaceholderData, diff --git a/src/state/queries/usePostThread/traversal.ts b/src/state/queries/usePostThread/traversal.ts index 72a0db577f..d1bc50daba 100644 --- a/src/state/queries/usePostThread/traversal.ts +++ b/src/state/queries/usePostThread/traversal.ts @@ -382,15 +382,17 @@ export function combine( loadServerHiddenItems: () => Promise }, ) { - for (let i = 0; i < items.length; i++) { - const item = items[i] + const result = [...items] + + for (let i = 0; i < result.length; i++) { + const item = result[i] if ( item.type === 'threadPost' && item.depth === 0 && !item.value.post.viewer?.replyDisabled && hasSession ) { - items.splice(i + 1, 0, { + result.splice(i + 1, 0, { type: 'replyComposer', key: 'replyComposer', }) @@ -400,9 +402,9 @@ export function combine( if (hidden.length || hasServerHiddenItems) { if (hiddenItemsVisible) { - return items.concat(hidden) + result.push(...hidden) } else { - return items.concat({ + result.push({ type: 'showHiddenReplies', key: 'showHiddenReplies', onLoad: loadServerHiddenItems, @@ -410,7 +412,7 @@ export function combine( } } - return items + return result } /** diff --git a/src/state/queries/usePostThread/types.ts b/src/state/queries/usePostThread/types.ts index 595b26a0ef..fe62b81f7d 100644 --- a/src/state/queries/usePostThread/types.ts +++ b/src/state/queries/usePostThread/types.ts @@ -104,6 +104,11 @@ export type ThreadItem = key: string item: 'anchor' | 'reply' | 'replyComposer' } + | { + type: 'bookend' + key: string + direction: 'up' | 'down' + } export type TraversalMetadata = { /**