skeleton view

src/state/queries/usePostThread/index.ts

@@ -15,6 +15,7 @@ import {
   type ThreadItem,
 } from '#/state/queries/usePostThread/types'
 import {getThreadgateRecord} from '#/state/queries/usePostThread/utils'
+import * as views from '#/state/queries/usePostThread/views'
 import {useAgent, useSession} from '#/state/session'
 import {useMergeThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 
@@ -124,11 +125,12 @@ export function usePostThread({anchor}: {anchor?: string}) {
     if (!hasServerHiddenReplies) return
 
     setAdditionalHiddenItems(
-      Array.from({length: 2}).map((_, i) => ({
+      Array.from({length: 2}).map((_, i) =>
-        type: 'skeleton',
+        views.skeleton({
-        key: `${anchor!}-reply-${i}`,
+          key: `${anchor!}-reply-${i}`,
-        item: 'reply',
+          item: 'reply',
-      })),
+        }),
+      ),
     )
 
     const params = {
@@ -212,27 +214,30 @@ export function usePostThread({anchor}: {anchor?: string}) {
         : 4
 
     if (!items.length) {
-      items.push({
+      items.push(
-        type: 'skeleton',
+        views.skeleton({
-        key: anchor!,
+          key: anchor!,
-        item: 'anchor',
+          item: 'anchor',
-      })
+        }),
+      )
 
       if (hasSession) {
-        items.push({
+        items.push(
-          type: 'skeleton',
+          views.skeleton({
-          key: 'replyComposer',
+            key: 'replyComposer',
-          item: 'replyComposer',
+            item: 'replyComposer',
-        })
+          }),
+        )
       }
     }
 
     for (let i = 0; i < skeletonReplies; i++) {
-      items.push({
+      items.push(
-        type: 'skeleton',
+        views.skeleton({
-        key: `${anchor!}-reply-${i}`,
+          key: `${anchor!}-reply-${i}`,
-        item: 'reply',
+          item: 'reply',
-      })
+        }),
+      )
     }
   }
 

src/state/queries/usePostThread/views.ts

@@ -115,6 +115,20 @@ export function readMore({
   }
 }
 
+export function skeleton({
+  key,
+  item,
+}: Omit<Extract<ThreadItem, {type: 'skeleton'}>, 'type'>): Extract<
+  ThreadItem,
+  {type: 'skeleton'}
+> {
+  return {
+    type: 'skeleton',
+    key,
+    item,
+  }
+}
+
 export function postViewToThreadPlaceholder(
   post: AppBskyFeedDefs.PostView,
 ): $Typed<