Improve thread loading (#4402)

* Increase the number of posts loaded when a self-thread is present

* Increase depth to 10, detect cutoffs on self-threads and show continue link

* Stacky the avis

src/view/com/post-thread/PostThread.tsx

@@ -34,6 +34,7 @@ import {ComposePrompt} from '../composer/Prompt'
 import {List, ListMethods} from '../util/List'
 import {ViewHeader} from '../util/ViewHeader'
 import {PostThreadItem} from './PostThreadItem'
+import {PostThreadLoadMore} from './PostThreadLoadMore'
 import {PostThreadShowHiddenReplies} from './PostThreadShowHiddenReplies'
 
 // FlatList maintainVisibleContentPosition breaks if too many items
@@ -364,6 +365,9 @@ export function PostThread({
         </View>
       )
     } else if (isThreadPost(item)) {
+      if (!treeView && item.ctx.hasMoreSelfThread) {
+        return <PostThreadLoadMore post={item.post} />
+      }
       const prev = isThreadPost(posts[index - 1])
         ? (posts[index - 1] as ThreadPost)
         : undefined

src/view/com/post-thread/PostThreadLoadMore.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import {View} from 'react-native'
+import {AppBskyFeedDefs, AtUri} from '@atproto/api'
+import {Trans} from '@lingui/macro'
+
+import {makeProfileLink} from '#/lib/routes/links'
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import {Link} from '../util/Link'
+import {UserAvatar} from '../util/UserAvatar'
+
+export function PostThreadLoadMore({post}: {post: AppBskyFeedDefs.PostView}) {
+  const t = useTheme()
+
+  const postHref = React.useMemo(() => {
+    const urip = new AtUri(post.uri)
+    return makeProfileLink(post.author, 'post', urip.rkey)
+  }, [post.uri, post.author])
+
+  return (
+    <Link
+      href={postHref}
+      style={[a.flex_row, a.align_center, a.py_md, {paddingHorizontal: 14}]}
+      hoverStyle={[t.atoms.bg_contrast_25]}>
+      <View style={[a.flex_row]}>
+        <View
+          style={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 34,
+            height: 34,
+            borderRadius: 18,
+            backgroundColor: t.atoms.bg.backgroundColor,
+            marginRight: -20,
+          }}>
+          <UserAvatar avatar={post.author.avatar} size={30} />
+        </View>
+        <View
+          style={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 34,
+            height: 34,
+            borderRadius: 18,
+            backgroundColor: t.atoms.bg.backgroundColor,
+          }}>
+          <UserAvatar avatar={post.author.avatar} size={30} />
+        </View>
+      </View>
+      <View style={[a.px_sm]}>
+        <Text style={[{color: t.palette.primary_500}, a.text_md]}>
+          <Trans>Continue thread...</Trans>
+        </Text>
+      </View>
+    </Link>
+  )
+}