diff --git a/src/screens/PostThread/components/ThreadItemPost.tsx b/src/screens/PostThread/components/ThreadItemPost.tsx index 282bdae9b6..205f905928 100644 --- a/src/screens/PostThread/components/ThreadItemPost.tsx +++ b/src/screens/PostThread/components/ThreadItemPost.tsx @@ -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 ( - + @@ -384,8 +385,14 @@ export function ThreadItemPostSkeleton() { - - + {even ? ( + <> + + + + ) : ( + + )} diff --git a/src/screens/PostThread/components/ThreadItemTreePost.tsx b/src/screens/PostThread/components/ThreadItemTreePost.tsx index e0f4e198a7..377e956a6d 100644 --- a/src/screens/PostThread/components/ThreadItemTreePost.tsx +++ b/src/screens/PostThread/components/ThreadItemTreePost.tsx @@ -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> - - - - - - - - - {richText?.text ? ( - - - - ) : undefined} - {limitLines ? ( - + + + + + + + {richText?.text ? ( + + - ) : undefined} - {post.embed && ( - - - - )} - + ) : undefined} + {limitLines ? ( + - + ) : undefined} + {post.embed && ( + + + + )} + @@ -413,3 +410,47 @@ function SubtleHover({children}: {children: React.ReactNode}) { ) } + +export function ThreadItemTreePostSkeleton({index}: {index: number}) { + const t = useTheme() + const even = index % 2 === 0 + return ( + + + + + + + + + + + + {even ? ( + <> + + + + ) : ( + + )} + + + + + + + + + + + + + ) +} diff --git a/src/screens/PostThread/index.tsx b/src/screens/PostThread/index.tsx index a4fcb31def..0d9d2a02c0 100644 --- a/src/screens/PostThread/index.tsx +++ b/src/screens/PostThread/index.tsx @@ -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 } else if (item.item === 'reply') { - return + if (thread.state.view === 'linear') { + return + } else { + return + } } } return null