Reply composer skele

src/screens/PostThread/components/ThreadItemReplyComposer.tsx

@@ -0,0 +1,31 @@
+import {View} from 'react-native'
+
+import {OUTER_SPACE} from '#/screens/PostThread/const'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import * as Skele from '#/components/Skeleton'
+
+/*
+ * Wacky padding here is just replicating what we have in the actual
+ * `PostThreadComposePrompt` component
+ */
+export function ThreadItemReplyComposerSkeleton() {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+
+  return (
+    <View
+      style={[
+        a.border_t,
+        t.atoms.border_contrast_low,
+        gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
+        {
+          paddingHorizontal: OUTER_SPACE,
+        },
+      ]}>
+      <View style={[a.flex_row, a.align_center, a.gap_xs, a.py_sm]}>
+        <Skele.Circle size={gtMobile ? 24 : 22} />
+        <Skele.Text style={[a.text_md]} />
+      </View>
+    </View>
+  )
+}

src/screens/PostThread/index.tsx

@@ -25,6 +25,7 @@ import {
 import {ThreadItemPostTombstone} from '#/screens/PostThread/components/ThreadItemPostTombstone'
 import {ThreadItemReadMore} from '#/screens/PostThread/components/ThreadItemReadMore'
 import {ThreadItemReadMoreUp} from '#/screens/PostThread/components/ThreadItemReadMoreUp'
+import {ThreadItemReplyComposerSkeleton} from '#/screens/PostThread/components/ThreadItemReplyComposer'
 import {
   ThreadItemTreePost,
   ThreadItemTreePostSkeleton,
@@ -314,6 +315,8 @@ export function Inner({uri}: {uri: string | undefined}) {
         } else {
           return <ThreadItemTreePostSkeleton index={index} />
         }
+      } else if (item.item === 'replyComposer') {
+        return <ThreadItemReplyComposerSkeleton />
       }
     }
     return null

src/state/queries/usePostThread/traversal.ts

@@ -406,10 +406,10 @@ export function buildThread({
 
   if (isLoading) {
     const anchorPost = items.at(0)
-    const skeletonReplies =
-      anchorPost && anchorPost.type === 'threadPost'
-        ? anchorPost?.value.post.replyCount ?? 4
-        : 4
+    const hasAnchorFromCache = anchorPost && anchorPost.type === 'threadPost'
+    const skeletonReplies = hasAnchorFromCache
+      ? anchorPost.value.post.replyCount ?? 4
+      : 4
 
     if (!items.length) {
       items.push(
@@ -421,10 +421,24 @@ export function buildThread({
     }
 
     if (hasSession) {
-      items.push({
-        type: 'replyComposer',
-        key: 'replyComposer',
-      })
+      // we might have this from cache
+      const replyDisabled =
+        hasAnchorFromCache &&
+        anchorPost.value.post.viewer?.replyDisabled === true
+
+      if (hasAnchorFromCache && !replyDisabled) {
+        items.push({
+          type: 'replyComposer',
+          key: 'replyComposer',
+        })
+      } else {
+        items.push(
+          views.skeleton({
+            key: 'replyComposer',
+            item: 'replyComposer',
+          }),
+        )
+      }
     }
 
     for (let i = 0; i < skeletonReplies; i++) {