Limit optimistic reply depth

src/state/queries/usePostThread/const.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import {type AppBskyUnspeccedGetPostThreadV2} from '@atproto/api'
+
+/**
+ * See the `below` param on {@link AppBskyUnspeccedGetPostThreadV2.QueryParams}
+ */
+export const BELOW = 4

src/state/queries/usePostThread/index.ts

@@ -4,6 +4,7 @@ import {useQuery, useQueryClient} from '@tanstack/react-query'
 import {wait} from '#/lib/async/wait'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useThreadPreferences} from '#/state/queries/preferences/useThreadPreferences'
+import {BELOW} from '#/state/queries/usePostThread/const'
 import {
   createCacheMutator,
   getThreadPlaceholder,
@@ -57,7 +58,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
         agent.app.bsky.unspecced.getPostThreadV2({
           anchor: anchor!,
           branchingFactor: view === 'linear' ? 1 : undefined,
-          below: 4,
+          below: BELOW,
           sort: sort,
           prioritizeFollowedUsers: prioritizeFollowedUsers,
         }),

src/state/queries/usePostThread/queryCache.ts

@@ -12,6 +12,7 @@ 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 createPostThreadQueryKey,
@@ -96,10 +97,15 @@ export function createCacheMutator({
               thread.splice(
                 i + 1,
                 itemsToRemove,
-                ...replies.map((r, ri) => {
-                  r.depth = existingParent.depth + 1 + ri
-                  return r
-                }),
+                ...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
+                  }),
               )
             }
           }