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

1 files changed, 57 insertions, 0 deletions

diff --git a/src/view/com/post-thread/PostThreadLoadMore.tsx b/src/view/com/post-thread/PostThreadLoadMore.tsx
new file mode 100644
index 000000000..780ea7728
--- /dev/null
+++ b/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>
+  )
+}