ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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>
authored by
Eric Bailey
Elijah Seed-Arita
and committed by
GitHub
d8e7e65a
16b14b9d
+80
-6
src/components/PostControls/index.tsx
+80
-6
src/components/PostControls/index.tsx
···
28
28
import {atoms as a, useBreakpoints} from '#/alf'
29
29
import {Reply as Bubble} from '#/components/icons/Reply'
30
30
import {useFormatPostStatCount} from '#/components/PostControls/util'
31
+
import * as Skele from '#/components/Skeleton'
31
32
import {BookmarkButton} from './BookmarkButton'
32
33
import {
33
34
PostControlButton,
···
188
189
})
189
190
}
190
191
191
-
const secondaryControlSpacingStyles = useMemo(() => {
192
-
let gap = 0 // default, we want `gap` to be defined on the resulting object
193
-
if (variant !== 'compact') gap = a.gap_xs.gap
194
-
if (big || gtPhone) gap = a.gap_sm.gap
195
-
return {gap}
196
-
}, [variant, big, gtPhone])
192
+
const secondaryControlSpacingStyles = useSecondaryControlSpacingStyles({
193
+
variant,
194
+
big,
195
+
gtPhone,
196
+
})
197
197
198
198
return (
199
199
<View
···
337
337
}
338
338
PostControls = memo(PostControls)
339
339
export {PostControls}
340
+
341
+
export function PostControlsSkeleton({
342
+
big,
343
+
style,
344
+
variant,
345
+
}: {
346
+
big?: boolean
347
+
style?: StyleProp<ViewStyle>
348
+
variant?: 'compact' | 'normal' | 'large'
349
+
}) {
350
+
const {gtPhone} = useBreakpoints()
351
+
352
+
const rowHeight = big ? 32 : 28
353
+
const padding = 4
354
+
const size = rowHeight - padding * 2
355
+
356
+
const secondaryControlSpacingStyles = useSecondaryControlSpacingStyles({
357
+
variant,
358
+
big,
359
+
gtPhone,
360
+
})
361
+
362
+
const itemStyles = {
363
+
padding,
364
+
}
365
+
366
+
return (
367
+
<Skele.Row
368
+
style={[a.flex_row, a.justify_between, a.align_center, a.gap_md, style]}>
369
+
<View style={[a.flex_row, a.flex_1, {maxWidth: 320}]}>
370
+
<View
371
+
style={[itemStyles, a.flex_1, a.align_start, {marginLeft: -padding}]}>
372
+
<Skele.Pill blend size={size} />
373
+
</View>
374
+
375
+
<View style={[itemStyles, a.flex_1, a.align_start]}>
376
+
<Skele.Pill blend size={size} />
377
+
</View>
378
+
379
+
<View style={[itemStyles, a.flex_1, a.align_start]}>
380
+
<Skele.Pill blend size={size} />
381
+
</View>
382
+
</View>
383
+
<View style={[a.flex_row, a.justify_end, secondaryControlSpacingStyles]}>
384
+
<View style={itemStyles}>
385
+
<Skele.Circle blend size={size} />
386
+
</View>
387
+
<View style={itemStyles}>
388
+
<Skele.Circle blend size={size} />
389
+
</View>
390
+
<View style={itemStyles}>
391
+
<Skele.Circle blend size={size} />
392
+
</View>
393
+
</View>
394
+
</Skele.Row>
395
+
)
396
+
}
397
+
398
+
function useSecondaryControlSpacingStyles({
399
+
variant,
400
+
big,
401
+
gtPhone,
402
+
}: {
403
+
variant?: 'compact' | 'normal' | 'large'
404
+
big?: boolean
405
+
gtPhone: boolean
406
+
}) {
407
+
return useMemo(() => {
408
+
let gap = 0 // default, we want `gap` to be defined on the resulting object
409
+
if (variant !== 'compact') gap = a.gap_xs.gap
410
+
if (big || gtPhone) gap = a.gap_sm.gap
411
+
return {gap}
412
+
}, [variant, big, gtPhone])
413
+
}
+2
-8
src/screens/PostThread/components/ThreadItemAnchor.tsx
+2
-8
src/screens/PostThread/components/ThreadItemAnchor.tsx
···
51
51
import {PostAlerts} from '#/components/moderation/PostAlerts'
52
52
import {type AppModerationCause} from '#/components/Pills'
53
53
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
54
-
import {PostControls} from '#/components/PostControls'
54
+
import {PostControls, PostControlsSkeleton} from '#/components/PostControls'
55
55
import {useFormatPostStatCount} from '#/components/PostControls/util'
56
56
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
57
57
import * as Prompt from '#/components/Prompt'
···
730
730
731
731
<Skele.Text style={[a.text_sm, {width: '50%'}]} />
732
732
733
-
<Skele.Row style={[a.justify_between]}>
734
-
<Skele.Pill blend size={24} />
735
-
<Skele.Pill blend size={24} />
736
-
<Skele.Pill blend size={24} />
737
-
<Skele.Circle blend size={24} />
738
-
<Skele.Circle blend size={24} />
739
-
</Skele.Row>
733
+
<PostControlsSkeleton big />
740
734
</View>
741
735
)
742
736
}
+2
-8
src/screens/PostThread/components/ThreadItemPost.tsx
+2
-8
src/screens/PostThread/components/ThreadItemPost.tsx
···
39
39
import {type AppModerationCause} from '#/components/Pills'
40
40
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
41
41
import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
42
-
import {PostControls} from '#/components/PostControls'
42
+
import {PostControls, PostControlsSkeleton} from '#/components/PostControls'
43
43
import {RichText} from '#/components/RichText'
44
44
import * as Skele from '#/components/Skeleton'
45
45
import {SubtleHover} from '#/components/SubtleHover'
···
390
390
)}
391
391
</Skele.Col>
392
392
393
-
<Skele.Row style={[a.justify_between, a.pt_xs]}>
394
-
<Skele.Pill blend size={16} />
395
-
<Skele.Pill blend size={16} />
396
-
<Skele.Pill blend size={16} />
397
-
<Skele.Circle blend size={16} />
398
-
<View />
399
-
</Skele.Row>
393
+
<PostControlsSkeleton />
400
394
</Skele.Col>
401
395
</Skele.Row>
402
396
</View>
+4
-11
src/screens/PostThread/components/ThreadItemTreePost.tsx
+4
-11
src/screens/PostThread/components/ThreadItemTreePost.tsx
···
38
38
import {type AppModerationCause} from '#/components/Pills'
39
39
import {Embed, PostEmbedViewContext} from '#/components/Post/Embed'
40
40
import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton'
41
-
import {PostControls} from '#/components/PostControls'
41
+
import {PostControls, PostControlsSkeleton} from '#/components/PostControls'
42
42
import {RichText} from '#/components/RichText'
43
43
import * as Skele from '#/components/Skeleton'
44
44
import {SubtleHover} from '#/components/SubtleHover'
···
177
177
paddingTop: OUTER_SPACE / 2,
178
178
},
179
179
item.ui.indent === 1 && [
180
-
!item.ui.showParentReplyLine && a.pt_lg,
180
+
!item.ui.showParentReplyLine && {paddingTop: OUTER_SPACE / 1.5},
181
181
!item.ui.showChildReplyLine && a.pb_sm,
182
182
],
183
183
item.ui.isLastChild &&
···
412
412
<View
413
413
style={[
414
414
{paddingHorizontal: OUTER_SPACE, paddingVertical: OUTER_SPACE / 1.5},
415
-
a.gap_md,
416
415
a.border_t,
417
416
t.atoms.border_contrast_low,
418
417
]}>
419
-
<Skele.Row style={[a.align_start, a.gap_md]}>
418
+
<Skele.Row style={[a.align_start, a.gap_xs]}>
420
419
<Skele.Circle size={TREE_AVI_WIDTH} />
421
420
422
421
<Skele.Col style={[a.gap_xs]}>
···
436
435
)}
437
436
</Skele.Col>
438
437
439
-
<Skele.Row style={[a.justify_between, a.pt_xs]}>
440
-
<Skele.Pill blend size={16} />
441
-
<Skele.Pill blend size={16} />
442
-
<Skele.Pill blend size={16} />
443
-
<Skele.Circle blend size={16} />
444
-
<View />
445
-
</Skele.Row>
438
+
<PostControlsSkeleton />
446
439
</Skele.Col>
447
440
</Skele.Row>
448
441
</View>