Checkpoint: handling exhausted replies

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,

src/state/queries/usePostThread/traversal.ts

@@ -382,15 +382,17 @@ export function combine(
     loadServerHiddenItems: () => Promise<void>
   },
 ) {
-  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
 }
 
 /**

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 = {
   /**