Tree view skeleton

src/screens/PostThread/components/ThreadItemPost.tsx

@@ -364,8 +364,9 @@ function SubtleHover({children}: {children: React.ReactNode}) {
   )
 }
 
-export function ThreadItemPostSkeleton() {
+export function ThreadItemPostSkeleton({index}: {index: number}) {
   const t = useTheme()
+  const even = index % 2 === 0
   return (
     <View
       style={[
@@ -375,7 +376,7 @@ export function ThreadItemPostSkeleton() {
         t.atoms.border_contrast_low,
       ]}>
       <Skele.Row style={[a.align_start, a.gap_md]}>
-        <Skele.Circle size={42} />
+        <Skele.Circle size={LINEAR_AVI_WIDTH} />
 
         <Skele.Col style={[a.gap_xs]}>
           <Skele.Row style={[a.gap_sm]}>
@@ -384,8 +385,14 @@ export function ThreadItemPostSkeleton() {
           </Skele.Row>
 
           <Skele.Col>
+            {even ? (
+              <>
                 <Skele.Text blend style={[a.text_md, {width: '100%'}]} />
                 <Skele.Text blend style={[a.text_md, {width: '60%'}]} />
+              </>
+            ) : (
+              <Skele.Text blend style={[a.text_md, {width: '60%'}]} />
+            )}
           </Skele.Col>
 
           <Skele.Row style={[a.justify_between, a.pt_xs]}>

src/screens/PostThread/components/ThreadItemTreePost.tsx

@@ -41,6 +41,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'
 
@@ -327,7 +328,6 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
           profile={post.author}
           interpretFilterAsBlur>
           <ThreadItemTreePostInnerWrapper item={item}>
-            <View style={[a.flex_row, a.gap_md]}>
             <View style={[a.flex_1]}>
               <PostMeta
                 author={post.author}
@@ -353,9 +353,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
                         enableTags
                         value={richText}
                         style={[a.flex_1, a.text_md]}
-                          numberOfLines={
+                        numberOfLines={limitLines ? MAX_POST_LINES : undefined}
-                            limitLines ? MAX_POST_LINES : undefined
-                          }
                         authorHandle={post.author.handle}
                         shouldProxyLinks={true}
                       />
@@ -389,7 +387,6 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
                 </View>
               </View>
             </View>
-            </View>
           </ThreadItemTreePostInnerWrapper>
         </PostHider>
       </SubtleHover>
@@ -413,3 +410,47 @@ function SubtleHover({children}: {children: React.ReactNode}) {
     </View>
   )
 }
+
+export function ThreadItemTreePostSkeleton({index}: {index: number}) {
+  const t = useTheme()
+  const even = index % 2 === 0
+  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={TREE_AVI_WIDTH} />
+
+        <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>
+            {even ? (
+              <>
+                <Skele.Text blend style={[a.text_md, {width: '100%'}]} />
+                <Skele.Text blend style={[a.text_md, {width: '60%'}]} />
+              </>
+            ) : (
+              <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

@@ -25,7 +25,10 @@ import {
 import {ThreadItemPostTombstone} from '#/screens/PostThread/components/ThreadItemPostTombstone'
 import {ThreadItemReadMore} from '#/screens/PostThread/components/ThreadItemReadMore'
 import {ThreadItemReadMoreUp} from '#/screens/PostThread/components/ThreadItemReadMoreUp'
-import {ThreadItemTreePost} from '#/screens/PostThread/components/ThreadItemTreePost'
+import {
+  ThreadItemTreePost,
+  ThreadItemTreePostSkeleton,
+} from '#/screens/PostThread/components/ThreadItemTreePost'
 import {useBreakpoints, web} from '#/alf'
 import * as Layout from '#/components/Layout'
 import {ListFooter} from '#/components/Lists'
@@ -306,7 +309,11 @@ export function Inner({uri}: {uri: string | undefined}) {
       if (item.item === 'anchor') {
         return <ThreadAnchorSkeleton />
       } else if (item.item === 'reply') {
-        return <ThreadItemPostSkeleton />
+        if (thread.state.view === 'linear') {
+          return <ThreadItemPostSkeleton index={index} />
+        } else {
+          return <ThreadItemTreePostSkeleton index={index} />
+        }
       }
     }
     return null