diff --git a/src/components/PostControls/index.tsx b/src/components/PostControls/index.tsx
index 4f9b9a3759..ec0016815f 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, 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 (
+ 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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+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])
+}
diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx
index aca8591e9c..9ea828af2d 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'
@@ -730,13 +730,7 @@ export function ThreadItemAnchorSkeleton() {
-
-
-
-
-
-
-
+
)
}
diff --git a/src/screens/PostThread/components/ThreadItemPost.tsx b/src/screens/PostThread/components/ThreadItemPost.tsx
index 7e336b14a2..eccc7be2cb 100644
--- a/src/screens/PostThread/components/ThreadItemPost.tsx
+++ b/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}) {
)}
-
-
-
-
-
-
-
+
diff --git a/src/screens/PostThread/components/ThreadItemTreePost.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx
index 33bbe7fe74..d77ef469c0 100644
--- a/src/screens/PostThread/components/ThreadItemTreePost.tsx
+++ b/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}) {
-
+
@@ -436,13 +435,7 @@ export function ThreadItemTreePostSkeleton({index}: {index: number}) {
)}
-
-
-
-
-
-
-
+