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])
+}