Add basic post and anchor skeletons

src/state/queries/usePostThread/index.ts

@@ -54,7 +54,7 @@ export function usePostThread({
       if (placeholder) {
         return {thread: [placeholder], hasHiddenReplies: false}
       }
-      return
+      return {thread: [], hasHiddenReplies: false}
     },
     select(data) {
       const threadgate = getThreadgateRecord(data.threadgate)
@@ -96,6 +96,38 @@ export function usePostThread({
     queryClient: qc,
   })
 
+  if (query.isPlaceholderData) {
+    const anchor = items.at(0)
+    const skeletonReplies =
+      anchor && anchor.type === 'threadPost'
+        ? anchor?.value.post.replyCount ?? 4
+        : 4
+
+    if (!items.length) {
+      items.push({
+        type: 'skeleton',
+        key: params.anchor!,
+        item: 'anchor',
+      })
+
+      if (hasSession) {
+        items.push({
+          type: 'skeleton',
+          key: 'replyComposer',
+          item: 'replyComposer',
+        })
+      }
+    }
+
+    for (let i = 0; i < skeletonReplies; i++) {
+      items.push({
+        type: 'skeleton',
+        key: `${params.anchor!}-reply-${i}`,
+        item: 'reply',
+      })
+    }
+  }
+
   return {
     ...query,
     data: {

src/state/queries/usePostThread/types.ts

@@ -92,6 +92,11 @@ export type ThreadItem =
       moreReplies: number
       skippedIndentIndices: Set<number>
     }
+  | {
+      type: 'skeleton'
+      key: string
+      item: 'anchor' | 'reply' | 'replyComposer'
+    }
 
 export type TraversalMetadata = {
   /**