1 files changed, 37 insertions, 24 deletions
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index 59dbf1e16..0a092c46b 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -1,14 +1,14 @@
 import React, {useRef} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, View} from 'react-native'
+import {ActivityIndicator} from 'react-native'
 import {CenteredView, FlatList} from '../util/Views'
 import {
   PostThreadViewModel,
   PostThreadViewPostModel,
-} from '../../../state/models/post-thread-view'
+} from 'state/models/post-thread-view'
 import {PostThreadItem} from './PostThreadItem'
 import {ErrorMessage} from '../util/error/ErrorMessage'
-import {s} from '../../lib/styles'
+import {s} from 'lib/styles'
 
 export const PostThread = observer(function PostThread({
   uri,
@@ -18,15 +18,24 @@ export const PostThread = observer(function PostThread({
   view: PostThreadViewModel
 }) {
   const ref = useRef<FlatList>(null)
-  const posts = view.thread ? Array.from(flattenThread(view.thread)) : []
-  const onRefresh = () => {
-    view
-      ?.refresh()
-      .catch(err =>
-        view.rootStore.log.error('Failed to refresh posts thread', err),
-      )
-  }
-  const onLayout = () => {
+  const [isRefreshing, setIsRefreshing] = React.useState(false)
+  const posts = React.useMemo(
+    () => (view.thread ? Array.from(flattenThread(view.thread)) : []),
+    [view.thread],
+  )
+
+  // events
+  // =
+  const onRefresh = React.useCallback(async () => {
+    setIsRefreshing(true)
+    try {
+      view?.refresh()
+    } catch (err) {
+      view.rootStore.log.error('Failed to refresh posts thread', err)
+    }
+    setIsRefreshing(false)
+  }, [view, setIsRefreshing])
+  const onLayout = React.useCallback(() => {
     const index = posts.findIndex(post => post._isHighlightedPost)
     if (index !== -1) {
       ref.current?.scrollToIndex({
@@ -35,17 +44,20 @@ export const PostThread = observer(function PostThread({
         viewOffset: 40,
       })
     }
-  }
-  const onScrollToIndexFailed = (info: {
-    index: number
-    highestMeasuredFrameIndex: number
-    averageItemLength: number
-  }) => {
-    ref.current?.scrollToOffset({
-      animated: false,
-      offset: info.averageItemLength * info.index,
-    })
-  }
+  }, [posts, ref])
+  const onScrollToIndexFailed = React.useCallback(
+    (info: {
+      index: number
+      highestMeasuredFrameIndex: number
+      averageItemLength: number
+    }) => {
+      ref.current?.scrollToOffset({
+        animated: false,
+        offset: info.averageItemLength * info.index,
+      })
+    },
+    [ref],
+  )
 
   // loading
   // =
@@ -76,9 +88,10 @@ export const PostThread = observer(function PostThread({
     <FlatList
       ref={ref}
       data={posts}
+      initialNumToRender={posts.length}
       keyExtractor={item => item._reactKey}
       renderItem={renderItem}
-      refreshing={view.isRefreshing}
+      refreshing={isRefreshing}
       onRefresh={onRefresh}
       onLayout={onLayout}
       onScrollToIndexFailed={onScrollToIndexFailed}