Tree view skeleton
This commit is contained in:
Eric Bailey
@@ -364,8 +364,9 @@ function SubtleHover({children}: {children: React.ReactNode}) {
|
||||
)
|
||||
}
|
||||
|
||||
export function ThreadItemPostSkeleton() {
|
||||
export function ThreadItemPostSkeleton({index}: {index: number}) {
|
||||
const t = useTheme()
|
||||
const even = index % 2 === 0
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
@@ -375,7 +376,7 @@ export function ThreadItemPostSkeleton() {
|
||||
t.atoms.border_contrast_low,
|
||||
]}>
|
||||
<Skele.Row style={[a.align_start, a.gap_md]}>
|
||||
<Skele.Circle size={42} />
|
||||
<Skele.Circle size={LINEAR_AVI_WIDTH} />
|
||||
|
||||
<Skele.Col style={[a.gap_xs]}>
|
||||
<Skele.Row style={[a.gap_sm]}>
|
||||
@@ -384,8 +385,14 @@ export function ThreadItemPostSkeleton() {
|
||||
</Skele.Row>
|
||||
|
||||
<Skele.Col>
|
||||
<Skele.Text blend style={[a.text_md, {width: '100%'}]} />
|
||||
<Skele.Text blend style={[a.text_md, {width: '60%'}]} />
|
||||
{even ? (
|
||||
<>
|
||||
<Skele.Text blend style={[a.text_md, {width: '100%'}]} />
|
||||
<Skele.Text blend style={[a.text_md, {width: '60%'}]} />
|
||||
</>
|
||||
) : (
|
||||
<Skele.Text blend style={[a.text_md, {width: '60%'}]} />
|
||||
)}
|
||||
</Skele.Col>
|
||||
|
||||
<Skele.Row style={[a.justify_between, a.pt_xs]}>
|
||||
|
||||
@@ -41,6 +41,7 @@ import {PostHider} from '#/components/moderation/PostHider'
|
||||
import {type AppModerationCause} from '#/components/Pills'
|
||||
import {PostControls} from '#/components/PostControls'
|
||||
import {RichText} from '#/components/RichText'
|
||||
import * as Skele from '#/components/Skeleton'
|
||||
import {SubtleWebHover} from '#/components/SubtleWebHover'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
@@ -327,66 +328,62 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
|
||||
profile={post.author}
|
||||
interpretFilterAsBlur>
|
||||
<ThreadItemTreePostInnerWrapper item={item}>
|
||||
<View style={[a.flex_row, a.gap_md]}>
|
||||
<View style={[a.flex_1]}>
|
||||
<PostMeta
|
||||
author={post.author}
|
||||
moderation={moderation}
|
||||
timestamp={post.indexedAt}
|
||||
postHref={postHref}
|
||||
avatarSize={TREE_AVI_WIDTH}
|
||||
style={[a.pb_2xs]}
|
||||
showAvatar
|
||||
/>
|
||||
<View style={[a.flex_row]}>
|
||||
<ThreadItemTreeReplyChildReplyLine item={item} />
|
||||
<View style={[a.flex_1]}>
|
||||
<LabelsOnMyPost post={post} style={[a.pb_2xs]} />
|
||||
<PostAlerts
|
||||
modui={moderation.ui('contentList')}
|
||||
style={[a.pb_2xs]}
|
||||
additionalCauses={additionalPostAlerts}
|
||||
/>
|
||||
{richText?.text ? (
|
||||
<View>
|
||||
<RichText
|
||||
enableTags
|
||||
value={richText}
|
||||
style={[a.flex_1, a.text_md]}
|
||||
numberOfLines={
|
||||
limitLines ? MAX_POST_LINES : undefined
|
||||
}
|
||||
authorHandle={post.author.handle}
|
||||
shouldProxyLinks={true}
|
||||
/>
|
||||
</View>
|
||||
) : undefined}
|
||||
{limitLines ? (
|
||||
<TextLink
|
||||
text={_(msg`Show More`)}
|
||||
style={pal.link}
|
||||
onPress={onPressShowMore}
|
||||
href="#"
|
||||
<View style={[a.flex_1]}>
|
||||
<PostMeta
|
||||
author={post.author}
|
||||
moderation={moderation}
|
||||
timestamp={post.indexedAt}
|
||||
postHref={postHref}
|
||||
avatarSize={TREE_AVI_WIDTH}
|
||||
style={[a.pb_2xs]}
|
||||
showAvatar
|
||||
/>
|
||||
<View style={[a.flex_row]}>
|
||||
<ThreadItemTreeReplyChildReplyLine item={item} />
|
||||
<View style={[a.flex_1]}>
|
||||
<LabelsOnMyPost post={post} style={[a.pb_2xs]} />
|
||||
<PostAlerts
|
||||
modui={moderation.ui('contentList')}
|
||||
style={[a.pb_2xs]}
|
||||
additionalCauses={additionalPostAlerts}
|
||||
/>
|
||||
{richText?.text ? (
|
||||
<View>
|
||||
<RichText
|
||||
enableTags
|
||||
value={richText}
|
||||
style={[a.flex_1, a.text_md]}
|
||||
numberOfLines={limitLines ? MAX_POST_LINES : undefined}
|
||||
authorHandle={post.author.handle}
|
||||
shouldProxyLinks={true}
|
||||
/>
|
||||
) : undefined}
|
||||
{post.embed && (
|
||||
<View style={[a.pb_xs]}>
|
||||
<PostEmbeds
|
||||
embed={post.embed}
|
||||
moderation={moderation}
|
||||
viewContext={PostEmbedViewContext.Feed}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
<PostControls
|
||||
post={postShadow}
|
||||
record={record}
|
||||
richText={richText}
|
||||
onPressReply={onPressReply}
|
||||
logContext="PostThreadItem"
|
||||
threadgateRecord={threadgateRecord}
|
||||
</View>
|
||||
) : undefined}
|
||||
{limitLines ? (
|
||||
<TextLink
|
||||
text={_(msg`Show More`)}
|
||||
style={pal.link}
|
||||
onPress={onPressShowMore}
|
||||
href="#"
|
||||
/>
|
||||
</View>
|
||||
) : undefined}
|
||||
{post.embed && (
|
||||
<View style={[a.pb_xs]}>
|
||||
<PostEmbeds
|
||||
embed={post.embed}
|
||||
moderation={moderation}
|
||||
viewContext={PostEmbedViewContext.Feed}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
<PostControls
|
||||
post={postShadow}
|
||||
record={record}
|
||||
richText={richText}
|
||||
onPressReply={onPressReply}
|
||||
logContext="PostThreadItem"
|
||||
threadgateRecord={threadgateRecord}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -413,3 +410,47 @@ function SubtleHover({children}: {children: React.ReactNode}) {
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function ThreadItemTreePostSkeleton({index}: {index: number}) {
|
||||
const t = useTheme()
|
||||
const even = index % 2 === 0
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
{paddingHorizontal: OUTER_SPACE, paddingVertical: OUTER_SPACE / 1.5},
|
||||
a.gap_md,
|
||||
a.border_t,
|
||||
t.atoms.border_contrast_low,
|
||||
]}>
|
||||
<Skele.Row style={[a.align_start, a.gap_md]}>
|
||||
<Skele.Circle size={TREE_AVI_WIDTH} />
|
||||
|
||||
<Skele.Col style={[a.gap_xs]}>
|
||||
<Skele.Row style={[a.gap_sm]}>
|
||||
<Skele.Text style={[a.text_md, {width: '20%'}]} />
|
||||
<Skele.Text blend style={[a.text_md, {width: '30%'}]} />
|
||||
</Skele.Row>
|
||||
|
||||
<Skele.Col>
|
||||
{even ? (
|
||||
<>
|
||||
<Skele.Text blend style={[a.text_md, {width: '100%'}]} />
|
||||
<Skele.Text blend style={[a.text_md, {width: '60%'}]} />
|
||||
</>
|
||||
) : (
|
||||
<Skele.Text blend style={[a.text_md, {width: '60%'}]} />
|
||||
)}
|
||||
</Skele.Col>
|
||||
|
||||
<Skele.Row style={[a.justify_between, a.pt_xs]}>
|
||||
<Skele.Pill blend size={16} />
|
||||
<Skele.Pill blend size={16} />
|
||||
<Skele.Pill blend size={16} />
|
||||
<Skele.Circle blend size={16} />
|
||||
<View />
|
||||
</Skele.Row>
|
||||
</Skele.Col>
|
||||
</Skele.Row>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -25,7 +25,10 @@ import {
|
||||
import {ThreadItemPostTombstone} from '#/screens/PostThread/components/ThreadItemPostTombstone'
|
||||
import {ThreadItemReadMore} from '#/screens/PostThread/components/ThreadItemReadMore'
|
||||
import {ThreadItemReadMoreUp} from '#/screens/PostThread/components/ThreadItemReadMoreUp'
|
||||
import {ThreadItemTreePost} from '#/screens/PostThread/components/ThreadItemTreePost'
|
||||
import {
|
||||
ThreadItemTreePost,
|
||||
ThreadItemTreePostSkeleton,
|
||||
} from '#/screens/PostThread/components/ThreadItemTreePost'
|
||||
import {useBreakpoints, web} from '#/alf'
|
||||
import * as Layout from '#/components/Layout'
|
||||
import {ListFooter} from '#/components/Lists'
|
||||
@@ -306,7 +309,11 @@ export function Inner({uri}: {uri: string | undefined}) {
|
||||
if (item.item === 'anchor') {
|
||||
return <ThreadAnchorSkeleton />
|
||||
} else if (item.item === 'reply') {
|
||||
return <ThreadItemPostSkeleton />
|
||||
if (thread.state.view === 'linear') {
|
||||
return <ThreadItemPostSkeleton index={index} />
|
||||
} else {
|
||||
return <ThreadItemTreePostSkeleton index={index} />
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
|
||||
Reference in New Issue
Block a user