diff --git a/src/components/PostControls/index.tsx b/src/components/PostControls/index.tsx
index f91bcd8a5d..aea4649cff 100644
--- a/src/components/PostControls/index.tsx
+++ b/src/components/PostControls/index.tsx
@@ -28,6 +28,7 @@ import * as Toast from '#/view/com/util/Toast'
import {atoms as a, flatten, 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,11 +189,11 @@ let PostControls = ({
})
}
- const secondaryControlSpacingStyles = flatten([
- {gap: 0}, // default, we want `gap` to be defined on the resulting object
- variant !== 'compact' && a.gap_xs,
- (big || gtPhone) && a.gap_sm,
- ])
+ const secondaryControlSpacingStyles = getSecondaryControlSpacingStyles({
+ variant,
+ big,
+ gtPhone,
+ })
return (
+ variant?: 'compact' | 'normal' | 'large'
+}) {
+ const {gtPhone} = useBreakpoints()
+
+ const rowHeight = big ? 32 : 28
+ const padding = 4
+ const size = rowHeight - padding * 2
+
+ const secondaryControlSpacingStyles = getSecondaryControlSpacingStyles({
+ variant,
+ big,
+ gtPhone,
+ })
+
+ const itemStyles = {
+ padding,
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function getSecondaryControlSpacingStyles({
+ variant,
+ big,
+ gtPhone,
+}: {
+ variant?: 'compact' | 'normal' | 'large'
+ big?: boolean
+ gtPhone: boolean
+}) {
+ return flatten([
+ {gap: 0}, // default, we want `gap` to be defined on the resulting object
+ variant !== 'compact' && a.gap_xs,
+ (big || gtPhone) && a.gap_sm,
+ ])
+}
diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx
index 301124aaa8..9524e9ac18 100644
--- a/src/screens/PostThread/components/ThreadItemAnchor.tsx
+++ b/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'
@@ -732,13 +732,7 @@ export function ThreadItemAnchorSkeleton() {
-
-
-
-
-
-
-
+
)
}
diff --git a/src/screens/PostThread/components/ThreadItemPost.tsx b/src/screens/PostThread/components/ThreadItemPost.tsx
index 5590bf625a..6fc198071c 100644
--- a/src/screens/PostThread/components/ThreadItemPost.tsx
+++ b/src/screens/PostThread/components/ThreadItemPost.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 {SubtleWebHover} from '#/components/SubtleWebHover'
@@ -389,13 +389,7 @@ export function ThreadItemPostSkeleton({index}: {index: number}) {
)}
-
-
-
-
-
-
-
+
diff --git a/src/screens/PostThread/components/ThreadItemTreePost.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx
index 5d31233585..f10217bd38 100644
--- a/src/screens/PostThread/components/ThreadItemTreePost.tsx
+++ b/src/screens/PostThread/components/ThreadItemTreePost.tsx
@@ -37,7 +37,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 {SubtleWebHover} from '#/components/SubtleWebHover'
@@ -434,13 +434,7 @@ export function ThreadItemTreePostSkeleton({index}: {index: number}) {
)}
-
-
-
-
-
-
-
+