Add basic post and anchor skeletons

src/screens/PostThread/components/ThreadAnchor.tsx

@@ -50,6 +50,7 @@ import {type AppModerationCause} from '#/components/Pills'
 import {PostControls} from '#/components/PostControls'
 import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
+import * as Skele from '#/components/Skeleton'
 import {Text} from '#/components/Typography'
 import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton'
 import {WhoCanReply} from '#/components/WhoCanReply'
@@ -574,3 +575,33 @@ function getThreadAuthor(
     return ''
   }
 }
+
+export function ThreadAnchorSkeleton() {
+  return (
+    <View style={[a.p_lg, a.gap_md]}>
+      <Skele.Row style={[a.align_center, a.gap_md]}>
+        <Skele.Circle size={42} />
+
+        <Skele.Col>
+          <Skele.Text style={[a.text_lg, {width: '20%'}]} />
+          <Skele.Text blend style={[a.text_md, {width: '40%'}]} />
+        </Skele.Col>
+      </Skele.Row>
+
+      <View>
+        <Skele.Text style={[a.text_xl, {width: '100%'}]} />
+        <Skele.Text style={[a.text_xl, {width: '60%'}]} />
+      </View>
+
+      <Skele.Text style={[a.text_sm, {width: '50%'}]} />
+
+      <Skele.Row style={[a.justify_between]}>
+        <Skele.Pill blend size={24} />
+        <Skele.Pill blend size={24} />
+        <Skele.Pill blend size={24} />
+        <Skele.Circle blend size={24} />
+        <Skele.Circle blend size={24} />
+      </Skele.Row>
+    </View>
+  )
+}

src/screens/PostThread/components/ThreadPost.tsx

@@ -42,6 +42,7 @@ import {PostHider} from '#/components/moderation/PostHider'
 import {type AppModerationCause} from '#/components/Pills'
 import {PostControls} from '#/components/PostControls'
 import {RichText} from '#/components/RichText'
+import * as Skele from '#/components/Skeleton'
 import {SubtleWebHover} from '#/components/SubtleWebHover'
 import {Text} from '#/components/Typography'
 
@@ -320,3 +321,40 @@ function SubtleHover({children}: {children: React.ReactNode}) {
     </View>
   )
 }
+
+export function ThreadPostSkeleton() {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        {paddingHorizontal: OUTER_SPACE, paddingVertical: OUTER_SPACE / 1.5},
+        a.gap_md,
+        a.border_t,
+        t.atoms.border_contrast_low,
+      ]}>
+      <Skele.Row style={[a.align_start, a.gap_md]}>
+        <Skele.Circle size={42} />
+
+        <Skele.Col style={[a.gap_xs]}>
+          <Skele.Row style={[a.gap_sm]}>
+            <Skele.Text style={[a.text_md, {width: '20%'}]} />
+            <Skele.Text blend style={[a.text_md, {width: '30%'}]} />
+          </Skele.Row>
+
+          <Skele.Col>
+            <Skele.Text blend style={[a.text_md, {width: '100%'}]} />
+            <Skele.Text blend style={[a.text_md, {width: '60%'}]} />
+          </Skele.Col>
+
+          <Skele.Row style={[a.justify_between, a.pt_xs]}>
+            <Skele.Pill blend size={16} />
+            <Skele.Pill blend size={16} />
+            <Skele.Pill blend size={16} />
+            <Skele.Circle blend size={16} />
+            <View />
+          </Skele.Row>
+        </Skele.Col>
+      </Skele.Row>
+    </View>
+  )
+}

src/screens/PostThread/index.tsx

@@ -20,8 +20,14 @@ import {PostThreadShowHiddenReplies} from '#/view/com/post-thread/PostThreadShow
 import {List, type ListMethods} from '#/view/com/util/List'
 import {HeaderDropdown} from '#/screens/PostThread/components/HeaderDropdown'
 import {ReadMore} from '#/screens/PostThread/components/ReadMore'
-import {ThreadAnchor} from '#/screens/PostThread/components/ThreadAnchor'
-import {ThreadPost} from '#/screens/PostThread/components/ThreadPost'
+import {
+  ThreadAnchor,
+  ThreadAnchorSkeleton,
+} from '#/screens/PostThread/components/ThreadAnchor'
+import {
+  ThreadPost,
+  ThreadPostSkeleton,
+} from '#/screens/PostThread/components/ThreadPost'
 import {ThreadReply} from '#/screens/PostThread/components/ThreadReply'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import * as Layout from '#/components/Layout'
@@ -305,6 +311,12 @@ export function Inner({uri}: {uri: string | undefined}) {
           }
         />
       )
+    } else if (item.type === 'skeleton') {
+      if (item.item === 'anchor') {
+        return <ThreadAnchorSkeleton />
+      } else if (item.item === 'reply') {
+        return <ThreadPostSkeleton />
+      }
     }
     return null
   }
@@ -358,7 +370,7 @@ export function Inner({uri}: {uri: string | undefined}) {
                  * Using `isFetching` over `isFetchingNextPage` is done on
                  * purpose here so we get the loader on initial render
                  */
-                isFetchingNextPage={isFetching}
+                // isFetchingNextPage={isFetching}
                 error={cleanError(error)}
                 onRetry={refetch}
                 /*