Fix optimistic insertion

src/state/queries/usePostThread/index.ts

@@ -49,6 +49,13 @@ export function usePostThread({anchor}: {anchor?: string}) {
     setView: baseSetView,
     prioritizeFollowedUsers,
   } = useThreadPreferences()
+  const below = useMemo(() => {
+    return view === 'linear'
+      ? LINEAR_VIEW_BELOW
+      : isWeb && gtPhone
+      ? TREE_VIEW_BELOW_DESKTOP
+      : TREE_VIEW_BELOW
+  }, [view, gtPhone])
 
   const postThreadQueryKey = createPostThreadQueryKey({
     anchor,
@@ -68,12 +75,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
       const {data} = await agent.app.bsky.unspecced.getPostThreadV2({
         anchor: anchor!,
         branchingFactor: view === 'linear' ? LINEAR_VIEW_BF : TREE_VIEW_BF,
-        below:
+        below,
-          view === 'linear'
-            ? LINEAR_VIEW_BELOW
-            : isWeb && gtPhone
-            ? TREE_VIEW_BELOW_DESKTOP
-            : TREE_VIEW_BELOW,
         sort: sort,
         prioritizeFollowedUsers: prioritizeFollowedUsers,
       })
@@ -144,12 +146,12 @@ export function usePostThread({anchor}: {anchor?: string}) {
   const mutator = useMemo(
     () =>
       createCacheMutator({
-        params: {view},
+        params: {view, below},
         postThreadQueryKey,
         postThreadOtherQueryKey,
         queryClient: qc,
       }),
-    [qc, view, postThreadQueryKey, postThreadOtherQueryKey],
+    [qc, view, below, postThreadQueryKey, postThreadOtherQueryKey],
   )
 
   /**

src/state/queries/usePostThread/queryCache.ts

@@ -14,7 +14,6 @@ import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '#/state/
 import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '#/state/queries/post-feed'
 import {findAllPostsInQueryData as findAllPostsInQuoteQueryData} from '#/state/queries/post-quotes'
 import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '#/state/queries/search-posts'
-import {BELOW} from '#/state/queries/usePostThread/const'
 import {getBranch} from '#/state/queries/usePostThread/traversal'
 import {
   type ApiThreadItem,
@@ -37,7 +36,7 @@ export function createCacheMutator({
   queryClient: QueryClient
   postThreadQueryKey: ReturnType<typeof createPostThreadQueryKey>
   postThreadOtherQueryKey: ReturnType<typeof createPostThreadOtherQueryKey>
-  params: Pick<PostThreadParams, 'view'>
+  params: Pick<PostThreadParams, 'view'> & {below: number}
 }) {
   return {
     insertReplies(
@@ -122,20 +121,17 @@ export function createCacheMutator({
              * OP insertions replace other replies _in linear view_.
              */
             const itemsToRemove = shouldReplaceWithOPReplies ? branch.length : 0
-
+            const itemsToInsert = replies
-            thread.splice(
-              i + 1,
-              itemsToRemove,
-              ...replies
               .map((r, ri) => {
                 r.depth = existingParent.depth + 1 + ri
                 return r
               })
               .filter(r => {
                 // Filter out replies that are too deep for our UI
-                  return r.depth <= BELOW
+                return r.depth <= params.below
-                }),
+              })
-            )
+
+            thread.splice(i + 1, itemsToRemove, ...itemsToInsert)
           }
         }