From 6926b852abf141eb9305b6ff579b2d8dee6ac660 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 5 Jun 2025 11:21:54 -0500
Subject: [PATCH] Reply composer skele

---
 .../components/ThreadItemReplyComposer.tsx    | 31 +++++++++++++++++++
 src/screens/PostThread/index.tsx              |  3 ++
 src/state/queries/usePostThread/traversal.ts  | 30 +++++++++++++-----
 3 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 src/screens/PostThread/components/ThreadItemReplyComposer.tsx

diff --git a/src/screens/PostThread/components/ThreadItemReplyComposer.tsx b/src/screens/PostThread/components/ThreadItemReplyComposer.tsx
new file mode 100644
index 0000000000..f1862569ea
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/screens/PostThread/index.tsx b/src/screens/PostThread/index.tsx
index 0d9d2a02c0..28b9a0ca39 100644
--- a/src/screens/PostThread/index.tsx
+++ b/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
diff --git a/src/state/queries/usePostThread/traversal.ts b/src/state/queries/usePostThread/traversal.ts
index c987f9156f..f0563cf294 100644
--- a/src/state/queries/usePostThread/traversal.ts
+++ b/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++) {