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 (
+
+
+
+
+
+
+ )
+}
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
}
+ } else if (item.item === 'replyComposer') {
+ return
}
}
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++) {