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

+88 -33
+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
··· 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
··· 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
··· 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>