Post skele tweaks (#9328)

* feat: PostControlsSkeleton (#9205)

* feat: new PostControlsSkeleton component

* feat: integrate PostControlsSkeleton into other usages

* fix: shrink skele pill and circle sizes a bit

* Couple small tweaks

(cherry picked from commit f6a38ec42274bffc41b2898d8addb735791494fd)

---------

Co-authored-by: Elijah Seed-Arita <elijaharita@gmail.com>

src/components/PostControls/index.tsx

@@ -28,6 +28,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints} from '#/alf'
 import {Reply as Bubble} from '#/components/icons/Reply'
 import {useFormatPostStatCount} from '#/components/PostControls/util'
+import * as Skele from '#/components/Skeleton'
 import {BookmarkButton} from './BookmarkButton'
 import {
   PostControlButton,
@@ -188,12 +189,11 @@ let PostControls = ({
     })
   }
 
-  const secondaryControlSpacingStyles = useMemo(() => {
-    let gap = 0 // default, we want `gap` to be defined on the resulting object
-    if (variant !== 'compact') gap = a.gap_xs.gap
-    if (big || gtPhone) gap = a.gap_sm.gap
-    return {gap}
-  }, [variant, big, gtPhone])
+  const secondaryControlSpacingStyles = useSecondaryControlSpacingStyles({
+    variant,
+    big,
+    gtPhone,
+  })
 
   return (
     <View
@@ -337,3 +337,77 @@ let PostControls = ({
 }
 PostControls = memo(PostControls)
 export {PostControls}
+
+export function PostControlsSkeleton({
+  big,
+  style,
+  variant,
+}: {
+  big?: boolean
+  style?: StyleProp<ViewStyle>
+  variant?: 'compact' | 'normal' | 'large'
+}) {
+  const {gtPhone} = useBreakpoints()
+
+  const rowHeight = big ? 32 : 28
+  const padding = 4
+  const size = rowHeight - padding * 2
+
+  const secondaryControlSpacingStyles = useSecondaryControlSpacingStyles({
+    variant,
+    big,
+    gtPhone,
+  })
+
+  const itemStyles = {
+    padding,
+  }
+
+  return (
+    <Skele.Row
+      style={[a.flex_row, a.justify_between, a.align_center, a.gap_md, style]}>
+      <View style={[a.flex_row, a.flex_1, {maxWidth: 320}]}>
+        <View
+          style={[itemStyles, a.flex_1, a.align_start, {marginLeft: -padding}]}>
+          <Skele.Pill blend size={size} />
+        </View>
+
+        <View style={[itemStyles, a.flex_1, a.align_start]}>
+          <Skele.Pill blend size={size} />
+        </View>
+
+        <View style={[itemStyles, a.flex_1, a.align_start]}>
+          <Skele.Pill blend size={size} />
+        </View>
+      </View>
+      <View style={[a.flex_row, a.justify_end, secondaryControlSpacingStyles]}>
+        <View style={itemStyles}>
+          <Skele.Circle blend size={size} />
+        </View>
+        <View style={itemStyles}>
+          <Skele.Circle blend size={size} />
+        </View>
+        <View style={itemStyles}>
+          <Skele.Circle blend size={size} />
+        </View>
+      </View>
+    </Skele.Row>
+  )
+}
+
+function useSecondaryControlSpacingStyles({
+  variant,
+  big,
+  gtPhone,
+}: {
+  variant?: 'compact' | 'normal' | 'large'
+  big?: boolean
+  gtPhone: boolean
+}) {
+  return useMemo(() => {
+    let gap = 0 // default, we want `gap` to be defined on the resulting object
+    if (variant !== 'compact') gap = a.gap_xs.gap
+    if (big || gtPhone) gap = a.gap_sm.gap
+    return {gap}
+  }, [variant, big, gtPhone])
+}

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -51,7 +51,7 @@ import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {type AppModerationCause} from '#/components/Pills'
 import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
-import {PostControls} from '#/components/PostControls'
+import {PostControls, PostControlsSkeleton} from '#/components/PostControls'
 import {useFormatPostStatCount} from '#/components/PostControls/util'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import * as Prompt from '#/components/Prompt'
@@ -730,13 +730,7 @@ export function ThreadItemAnchorSkeleton() {
 
       <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>
+      <PostControlsSkeleton big />
     </View>
   )
 }

src/screens/PostThread/components/ThreadItemPost.tsx

@@ -39,7 +39,7 @@ import {PostHider} from '#/components/moderation/PostHider'
 import {type AppModerationCause} from '#/components/Pills'
 import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
-import {PostControls} from '#/components/PostControls'
+import {PostControls, PostControlsSkeleton} from '#/components/PostControls'
 import {RichText} from '#/components/RichText'
 import * as Skele from '#/components/Skeleton'
 import {SubtleHover} from '#/components/SubtleHover'
@@ -390,13 +390,7 @@ export function ThreadItemPostSkeleton({index}: {index: number}) {
             )}
           </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>
+          <PostControlsSkeleton />
         </Skele.Col>
       </Skele.Row>
     </View>

src/screens/PostThread/components/ThreadItemTreePost.tsx

@@ -38,7 +38,7 @@ import {PostHider} from '#/components/moderation/PostHider'
 import {type AppModerationCause} from '#/components/Pills'
 import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
-import {PostControls} from '#/components/PostControls'
+import {PostControls, PostControlsSkeleton} from '#/components/PostControls'
 import {RichText} from '#/components/RichText'
 import * as Skele from '#/components/Skeleton'
 import {SubtleHover} from '#/components/SubtleHover'
@@ -177,7 +177,7 @@ const ThreadItemTreePostInnerWrapper = memo(
             paddingTop: OUTER_SPACE / 2,
           },
           item.ui.indent === 1 && [
-            !item.ui.showParentReplyLine && a.pt_lg,
+            !item.ui.showParentReplyLine && {paddingTop: OUTER_SPACE / 1.5},
             !item.ui.showChildReplyLine && a.pb_sm,
           ],
           item.ui.isLastChild &&
@@ -412,11 +412,10 @@ export function ThreadItemTreePostSkeleton({index}: {index: number}) {
     <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.Row style={[a.align_start, a.gap_xs]}>
         <Skele.Circle size={TREE_AVI_WIDTH} />
 
         <Skele.Col style={[a.gap_xs]}>
@@ -436,13 +435,7 @@ export function ThreadItemTreePostSkeleton({index}: {index: number}) {
             )}
           </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>
+          <PostControlsSkeleton />
         </Skele.Col>
       </Skele.Row>
     </View>