Enhancements to live comments (#2269)

* check new comments every 10 seconds

* enhance: clear newComments on child comments when we show a topLevel new comment; cleanup: resolvers, logs

* handle comments of comments, new structure to clear newComments on childs

* use original recursive comments data structure

* correct comment structure after deduplication

* faster newComments query deduplication, don't need to know how many comments are there

* cleanup: comments on newComments fetches and dedupes

* cleanup, use correct function declarations

* stop polling after 30 minutes, pause polling if user is not on the page

* ActionTooltip indicating that the user is in a live comment section

* handleVisibilityChange to control polling by visibility

* paused polling styling, check activity on 1 minute intervals and visibility change, light cleanup

* user can resume polling without refreshing the page

* better naming, straightforward dedupeComment on newComment arrival

* cleanup: better naming, get latest comment creation, correct order of comment injection

* cleanup: refactor live comments related functions to use-live-comments.js

* refactor: clearer naming, optimized polling and date retrieval logic, use of constants, general cleanup

* ui: place ShowNewComments in the bottom-right corner of nested comments

* fix: make updateQuery sort-aware to correctly inject the comment in the correct Item query

* cleanup: better naming; fix: usecallback on live comments component; fix leak on useEffect because of missing sort
atomic apollo cache manipulations; manage top sort not being present in item query cache
queue nested comments without a parent, retry on the next poll
fix commit messages

* fix: don't show unpaid comments; cleanup: compact cache merge/dedupe, queue comments via state

* fix: read new comments fragments to inject fresh new comments, fixing dropped comments;

ui: show amount of new comments

refactor: correct function positioning;

cleanup: useless logs

* enhance: queuedComments Ref, cache-and-network fetch policy; freshNewComments readFragment fallback to received comment

* cleanup: detailed comments and better ShowNewComment text

* fix: while showing new comments, also update ncomments for UI and pagination

* refactor: ShowNewComments is its own component; cleanup: proven useless dedupe on ShowNewComments, count nested ncomments from fresh new comments

* enhance: direct latest comment createdAt calc with reduce

* cleanup queue on unmount

* feat: live comments indicator for bottomed-out replies, ncomments updates; fix: nested comment structures

- new comments indicator for bottomed-out replies
- ncomments sync for parent and its ancestors
- limited comments fragment for comments that don't have CommentsRecursive
- reduce cache complexity by removing useless roundtrips

ux: live comments indicator on bottomedOut replies

fix: dedupe newComments before displaying ShowNewComments to avoid false positives

enhance: store ids of new comments in the cache, instead of carrying full comments that would get discarded anyway

hotfix: newComments deduplication ID mismatch, filter null comments from freshNewComments

fix: ncomments not updating for all comment levels; refactor: share Reply update ancestors' ncomments function with ShowNewComments

cleanup: better naming to indicate the total number of comments including nested comments

fix: increment parent comment ncomments

cleanup: Items that will have comments will always have a structure where item.comments is true

cleanup: reduce code complexity checking the nested comment update result instead of preventively reading the fragment

cleanup: avoid double-updating ncomments on parent

fix: don't use CommentsRecursive for bottomed-out comments

cleanup: better fragment naming; add TODO for absolute bottom comments

* enhance: give the possibility to show all new comments of a thread, even nested

* enhance: change favicon on new comments; warn: prop-drilling

* refactor: merge ShowAllNewComments with ShowNewComments, better usage of props

* hotfix: isThread should be recognized when an item has 2 items in its path

* fix regression: topLevel comments not showing

* fix: avoid trying to show new comments even after the depth limit; todo: two recursive counts might be too much

* favicon-new-comment, fix favicon showing also when there aren't new comments

* enhance: highlight new comments when shown; nit-fixes and cleanups

fixes:
- sync local commentsViewedAt on comment injection, to avoid double outline on item re-visit
- avoid double highlighting when client-side visiting an item and injecting a new comment

cleanups:
- move ShowNewComments functions to dedicated lib/comments.js
- bust auto-show enhancement due to bad useEffect usage

todos:
- two recursive counts might be too much

* cleanup: move cache manipulation functions, comments for comments.js

- lib/comments.js explanations for its functions
- itemUpdateQuery, commentUpdateFragment, getLatestCommentCreatedAt on comments.js
- format too many imports from comments.js

todo:
- we're not deduping comments for isThread, which forces us at this state, to dedupe twice

* enhance: highlight new comment with injected field, recursive injection in every case but top level; cleanups

cleanups:
- better separation of concerns for lib/comments.js
- don't show new comment count, avoiding useless complexity
- simpler topLevel/nested logic
- add comments

* backport live comments logic enhancements

use-live-comments:
- remove useless dedupe against already present comments
- check newComments.comments length to tell if there are new comments
- code reordering

show-new-comments:
- show all new comments recursively for nested comments
- get always the newest comments to inject also their own child new comments
- update local storage commentsViewedAt on comment injection
- respect depth on comment injection

comments.js
- apollo cache manipulations now live here

* hotfix: handle undefined item.comments.comments on dedupe

* hotfix: fix lint after merge

* hotfix: limited fragment for recursive comment collection; protect from null fragments; add missing deps to memoization

* merge: missing memo deps, limited fragment for non-recursive comments; fix: don't highlight injected comments with classic outline; cleanup: comments

* docs: clarify ncomments updates

* cleanup: remove unused export

* count and show only the direct new comments and recursively their children

enhance: dedupe against existing comments only in the component
enhance: recursive count/injection share the same logic

* fix regression on top level counting

* hotfix: introduce readNestedCommentsFragment in lib/comments.js

* fix: count also existing comments of a new comment; cleanup: use readCommentFragment also for prepareComments; reduce freshNewComments usage

* add support for comments at the deepest level

fixes:
- client-side navigation re-fetched all new comments because 'after' was cached, now the latest new comment time persists in sessionStorage

enhancements:
- use CommentWithNewMinimal fragment fallback for comments at the deepest level
- tweak ReplyOnAnotherPage to show also how many direct new comments are there

cleanup:
- queue management is not needed anymore, therefore it has been removed

* cleanup: remove logs

* revert counting on ReplyOnAnotherPage, TODO for enhancements PR

* move ShowNewComments to CommentsHeader for top level comments

* fix: update commentsViewedAfterComment to support ncomments

* fix typo, lint

* cleanup: remove old CSS

* enhance: inject topLevel and its children new comments, simplify injection logic

- top-level and nested comment handling share the same recursion logic
- ShowNewComments references the item object for every type of comments
— note: item from item-full.js is passed to comments.js
- depth now starts at 0 to support top level comments
- injection and counting now reach the deepest level, updating also the deepest comment

* cleanup: remove unused topLevel prop

* fix: deepest comments don't have CommentsRecursive structure, don't access it on injection

* move top level ShowNewComments above CommentsHeader; preserve space to avoid vertical layout shifting

* cleanup: remove unused item on CommentsHeader

* enhance: scroll and load new comments via a floating button using IntersectionObserver API; fix merge: restore injected field for outlining

* style: transparent and animated floating button, new comment dot color aligned to new comments accent color

* cleanup: less redundancy between the two types of buttons; enhance: show the floating button only if we're past the element, not only if it's not visible

* enhance: outline newly injected comments using root item's lastCommentAt

* cleanup: remove transparency of floating comments button, remove other traces of the injected field

* adapt and restore showing all new comments of a thread

* fix: respect deepest comments structure on injection, adjust depth limit; cleanup: consistent naming

* fix: avoid double outlines because of all conditions being met

* cleanup: remove favicon, dedicate space for useVisibility, correct comments

* ux: show all new comments of a thread only if its children have them

* mark injected comments in the cache for reliable outlining

* cleanup: clearer structure, more explaining

* optimize: better closure usage, remove duplicate code, immutable payloads

- ncomments count logic shared with injection and counting
- don't re-create and persist closures for every injection, rather temporarily on injection
- access item hierarchy once, avoid creating new arrays
- don't create and mutate payloads, rather know what to return

fixes:
- fix wrong parameters on traverseNewComments recursion

* cleanup: further clarifications

* safer rootLastCommentAt usage for injected comments outlining

* hotfix: ignore nDirectComments server updates when the item being updated has pending newComments, fixes CommentEdit consequences

* simpler show all new comments text for thread comments, regardless of how many

* fix: reference the correct Item for newComments reading, during nDirectComments apollo merge

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>

components/comment.js

@@ -97,7 +97,7 @@ export function CommentFlat ({ item, rank, siblingComments, ...props }) {
 }
 
 export default function Comment ({
-  item, children, replyOpen, includeParent, topLevel,
+  item, children, replyOpen, includeParent, topLevel, rootLastCommentAt,
   rootText, noComments, noReply, truncate, depth, pin, setDisableRetry, disableRetry
 }) {
   const [edit, setEdit] = useState()
@@ -141,12 +141,20 @@ export default function Comment ({
   }, [item.id, cache, router.query.commentId])
 
   useEffect(() => {
+    if (me?.id === item.user?.id) return
+    const itemCreatedAt = new Date(item.createdAt).getTime()
+
     if (router.query.commentsViewedAt &&
-        me?.id !== item.user?.id &&
+        !item.injected &&
-        new Date(item.createdAt).getTime() > router.query.commentsViewedAt) {
+        itemCreatedAt > router.query.commentsViewedAt) {
       ref.current.classList.add('outline-new-comment')
+    // newly injected comments have to use a different class to outline every new comment
+    } else if (rootLastCommentAt &&
+              item.injected &&
+              itemCreatedAt > new Date(rootLastCommentAt).getTime()) {
+      ref.current.classList.add('outline-new-injected-comment')
     }
-  }, [item.id])
+  }, [item.id, rootLastCommentAt])
 
   const bottomedOut = depth === COMMENT_DEPTH_LIMIT || (item.comments?.comments.length === 0 && item.nDirectComments > 0)
   // Don't show OP badge when anon user comments on anon user posts
@@ -261,11 +269,9 @@ export default function Comment ({
                 : !noReply &&
                   <Reply depth={depth + 1} item={item} replyOpen={replyOpen} onCancelQuote={cancelQuote} onQuoteReply={quoteReply} quote={quote}>
                     {root.bounty && !bountyPaid && <PayBounty item={item} />}
-                    {item.newComments?.length > 0 && (
+                    <div className='ms-auto'>
-                      <div className='ms-auto'>
+                      <ShowNewComments item={item} depth={depth} />
-                        <ShowNewComments item={item} depth={depth} />
+                    </div>
-                      </div>
-                    )}
                   </Reply>}
               {children}
               <div className={styles.comments}>
@@ -273,7 +279,7 @@ export default function Comment ({
                   ? (
                     <>
                       {item.comments.comments.map((item) => (
-                        <Comment depth={depth + 1} key={item.id} item={item} />
+                        <Comment depth={depth + 1} key={item.id} item={item} rootLastCommentAt={rootLastCommentAt} />
                       ))}
                       {item.comments.comments.length < item.nDirectComments && <ViewAllReplies id={item.id} nhas={item.ncomments} />}
                     </>

components/comment.module.css

@@ -147,15 +147,33 @@
 
 @keyframes pulse {
     0% {
-        background-color: #FADA5E;
+        background-color: #80d3ff;
         opacity: 0.7;
     }
     50% {
-        background-color: #F6911D;
+        background-color: #007cbe;
         opacity: 1;
     }
     100% {
-        background-color: #FADA5E;
+        background-color: #80d3ff;
         opacity: 0.7;
     }
 }
+
+.floatingComments {
+    position: fixed;
+    top: 72px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1050;
+    animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+    0% {
+        transform: translateX(-50%) translateY(-100px);
+    }
+    100% {
+        transform: translateX(-50%) translateY(0);
+    }
+}

components/comments.js

@@ -76,7 +76,7 @@ export default function Comments ({
 
   return (
     <>
-      <ShowNewComments item={item} sort={router.query.sort} />
+      <ShowNewComments topLevel item={item} sort={router.query.sort} />
       {comments?.length > 0
         ? <CommentsHeader
             commentSats={commentSats} parentCreatedAt={parentCreatedAt}
@@ -95,11 +95,11 @@ export default function Comments ({
         : null}
       {pins.map(item => (
         <Fragment key={item.id}>
-          <Comment depth={1} item={item} {...props} pin />
+          <Comment depth={1} item={item} rootLastCommentAt={lastCommentAt} {...props} pin />
         </Fragment>
       ))}
       {comments.filter(({ position }) => !position).map(item => (
-        <Comment depth={1} key={item.id} item={item} {...props} />
+        <Comment depth={1} key={item.id} item={item} rootLastCommentAt={lastCommentAt} {...props} />
       ))}
       {ncomments > FULL_COMMENTS_THRESHOLD &&
         <MoreFooter

components/show-new-comments.js

@@ -1,8 +1,10 @@
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { useApolloClient } from '@apollo/client'
 import styles from './comment.module.css'
 import { COMMENT_DEPTH_LIMIT } from '../lib/constants'
 import { commentsViewedAfterComment } from '../lib/new-comments'
+import classNames from 'classnames'
+import useVisibility from './use-visibility'
 import {
   itemUpdateQuery,
   commentUpdateFragment,
@@ -18,42 +20,59 @@ function dedupeNewComments (newComments, comments = []) {
   return newComments.filter(id => !existingIds.has(id))
 }
 
+// of an array of new comments, count each new comment + all their existing comments
+function countNComments (newComments) {
+  let totalNComments = newComments.length
+  for (const comment of newComments) {
+    totalNComments += comment.ncomments || 0
+  }
+  return totalNComments
+}
+
 // prepares and creates a new comments fragment for injection into the cache
 // returns a function that can be used to update an item's comments field
-function prepareComments ({ client, newComments }) {
+function prepareComments (data, client, newComments) {
-  return (data) => {
+  const totalNComments = countNComments(newComments)
-    // count total comments being injected: each new comment + all their existing nested comments
-    let totalNComments = newComments.length
-    for (const comment of newComments) {
-      // add all nested comments (subtree) under this newly injected comment to the total
-      totalNComments += (comment.ncomments || 0)
-    }
 
-    // update all ancestors, but not the item itself
+  const itemHierarchy = data.path.split('.')
-    const ancestors = data.path.split('.').slice(0, -1)
+  const ancestors = itemHierarchy.slice(0, -1)
-    updateAncestorsCommentCount(client.cache, ancestors, totalNComments)
+  const rootId = itemHierarchy[0]
 
-    // update commentsViewedAt with the most recent fresh new comment
+  // update all ancestors, but not the item itself
-    // quirk: this is not the most recent comment, it's the most recent comment in the newComments array
+  updateAncestorsCommentCount(client.cache, ancestors, totalNComments)
-    //        as such, the next visit will not outline other new comments that are older than this one.
-    const latestCommentCreatedAt = getLatestCommentCreatedAt(newComments, data.createdAt)
-    const rootId = data.path.split('.')[0]
-    commentsViewedAfterComment(rootId, latestCommentCreatedAt, totalNComments)
 
-    // return the updated item with the new comments injected
+  // update commentsViewedAt with the most recent fresh new comment
-    return {
+  // quirk: this is not the most recent comment, it's the most recent comment in the newComments array
-      ...data,
+  //        as such, the next visit will not outline other new comments that are older than this one.
-      comments: { ...data.comments, comments: [...newComments, ...(data.comments?.comments || [])] },
+  const latestCommentCreatedAt = getLatestCommentCreatedAt(newComments, data.createdAt)
-      ncomments: data.ncomments + totalNComments,
+  commentsViewedAfterComment(rootId, latestCommentCreatedAt, totalNComments)
-      newComments: []
+
-    }
+  // an item can either have a comments.comments field, or not
-  }
+  const payload = data.comments
+    ? {
+        ...data,
+        ncomments: data.ncomments + totalNComments,
+        newComments: [],
+        comments: {
+          ...data.comments,
+          comments: newComments.concat(data.comments.comments)
+        }
+      }
+    // when the fragment doesn't have a comments field, we just update stats fields
+    : {
+        ...data,
+        ncomments: data.ncomments + totalNComments,
+        newComments: []
+      }
+
+  return payload
 }
 
 // traverses all new comments and their children
-// at each level, we can execute a callback giving the new comments and the item
+// if we're showing all new comments of a thread, we also consider their existing children
-function traverseNewComments (client, item, onLevel, currentDepth = 1) {
+function traverseNewComments (client, item, onLevel, threadComment = false, currentDepth = 1) {
-  if (currentDepth > COMMENT_DEPTH_LIMIT) return
+  // if we're at the depth limit, stop traversing, we've reached the bottom of the visible thread
+  if (currentDepth >= COMMENT_DEPTH_LIMIT) return
 
   if (item.newComments && item.newComments.length > 0) {
     const dedupedNewComments = dedupeNewComments(item.newComments, item.comments?.comments)
@@ -61,75 +80,120 @@ function traverseNewComments (client, item, onLevel, currentDepth = 1) {
     // being newComments an array of comment ids, we can get their latest version from the cache
     // ensuring that we don't miss any new comments
     const freshNewComments = dedupedNewComments.map(id => {
-      return readCommentsFragment(client, id)
+      // mark all new comments as injected, so we can outline them
+      return { ...readCommentsFragment(client, id), injected: true }
     }).filter(Boolean)
 
-    // passing currentDepth allows children of top level comments
+    // at each level, we can execute a callback passing the current item's new comments, depth and ID
-    // to be updated by the commentUpdateFragment
+    onLevel(freshNewComments, currentDepth, item.id)
-    onLevel(freshNewComments, item, currentDepth)
 
     for (const newComment of freshNewComments) {
-      traverseNewComments(client, newComment, onLevel, currentDepth + 1)
+      traverseNewComments(client, newComment, onLevel, threadComment, currentDepth + 1)
+    }
+  }
+
+  // if we're showing all new comments of a thread
+  // we consider every child comment recursively
+  if (threadComment && item.comments?.comments) {
+    for (const child of item.comments.comments) {
+      traverseNewComments(client, child, onLevel, threadComment, currentDepth + 1)
     }
   }
 }
 
-// recursively processes and displays all new comments and its children
+// recursively processes and displays all new comments
 // handles comment injection at each level, respecting depth limits
-function injectNewComments (client, item, currentDepth, sort) {
+function injectNewComments (client, item, currentDepth, sort, threadComment = false) {
-  traverseNewComments(client, item, (newComments, item, depth) => {
+  traverseNewComments(client, item, (newComments, depth, itemId) => {
     if (newComments.length > 0) {
-      const payload = prepareComments({ client, newComments })
+      // traverseNewComments also passes the depth of the current item
-
+      // used to determine if in an array of new comments, we are injecting topLevels (depth 0) or not
-      // used to determine if by iterating through the new comments
-      // we are injecting topLevels (depth 0) or not
       if (depth === 0) {
-        itemUpdateQuery(client, item.id, sort, payload)
+        itemUpdateQuery(client, itemId, sort, (data) => prepareComments(data, client, newComments))
       } else {
-        commentUpdateFragment(client, item.id, payload)
+        commentUpdateFragment(client, itemId, (data) => prepareComments(data, client, newComments))
       }
     }
-  }, currentDepth)
+  }, threadComment, currentDepth)
 }
 
-// counts all new comments for an item and its children
+// counts all new comments of an item
-function countAllNewComments (client, item, currentDepth = 1) {
+function countAllNewComments (client, item, thread = false, currentDepth = 1) {
-  let totalNComments = 0
+  let newCommentsCount = 0
+  let threadChildren = false
 
-  // count by traversing all new comments and their children
+  // count by traversing the comment structure
-  traverseNewComments(client, item, (newComments) => {
+  traverseNewComments(client, item, (newComments, depth) => {
-    totalNComments += newComments.length
+    newCommentsCount += countNComments(newComments)
-    for (const newComment of newComments) {
+
-      totalNComments += newComment.ncomments || 0
+    // if we reached a depth greater than 1, the thread's children have new comments
+    if (depth > 1 && newComments.length > 0) {
+      threadChildren = true
     }
-  }, currentDepth)
+  }, thread, currentDepth)
 
-  return totalNComments
+  return { newCommentsCount, threadChildren }
 }
 
-// ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field
+function FloatingComments ({ buttonRef, showNewComments, text }) {
-export function ShowNewComments ({ item, sort, depth = 0 }) {
+  // show the floating comments button only when we're past the main top level button
-  const client = useApolloClient()
+  const isButtonVisible = useVisibility(buttonRef, { pastElement: true })
 
-  // recurse through all new comments and their children
+  if (isButtonVisible) return null
-  const newCommentsCount = item.newComments?.length > 0 ? countAllNewComments(client, item, depth) : 0
-
-  const showNewComments = useCallback(() => {
-    // a top level comment doesn't have depth, we pass 0 to signify this
-    // other comments are injected from their depth
-    injectNewComments(client, item, depth, sort)
-  }, [client, sort, item, depth])
 
   return (
     <span
-      onClick={showNewComments}
+      className={classNames(styles.floatingComments, 'btn btn-sm btn-info')}
-      className='fw-bold d-flex align-items-center gap-2 px-3 pointer'
+      onClick={() => {
-      style={{ visibility: newCommentsCount > 0 ? 'visible' : 'hidden' }}
+        // show new comments as we scroll up
+        showNewComments()
+        buttonRef.current?.scrollIntoView({ behavior: 'smooth' })
+      }}
     >
-      {newCommentsCount > 1
+      {text}
-        ? `${newCommentsCount} new comments`
-        : 'show new comment'}
-      <div className={styles.newCommentDot} />
     </span>
   )
 }
+
+// ShowNewComments is a component that dedupes, refreshes and injects newComments into the comments field
+export function ShowNewComments ({ topLevel, item, sort, depth = 0 }) {
+  const client = useApolloClient()
+  const ref = useRef(null)
+
+  // a thread is a top-level comment
+  const thread = item.path?.split('.').length === 2
+
+  // recurse through all new comments and their children
+  // if the item is a thread, we consider every existing child comment
+  const { newCommentsCount, threadChildren } = countAllNewComments(client, item, thread, depth)
+
+  // only if the item is a thread and its children have new comments, we show "show all new comments"
+  const threadComment = thread && threadChildren
+
+  const showNewComments = useCallback(() => {
+    // a top level comment doesn't pass depth, we pass its default value of 0 to signify this
+    // child comments are injected from the depth they're at
+    injectNewComments(client, item, depth, sort, threadComment)
+  }, [client, sort, item, depth])
+
+  const text = !threadComment
+    ? `${newCommentsCount} new comment${newCommentsCount > 1 ? 's' : ''}`
+    : 'show all new comments'
+
+  return (
+    <>
+      <span
+        ref={ref}
+        onClick={showNewComments}
+        className='fw-bold d-flex align-items-center gap-2 px-3 pointer'
+        style={{ visibility: newCommentsCount > 0 ? 'visible' : 'hidden' }}
+      >
+        {text}
+        <div className={styles.newCommentDot} />
+      </span>
+      {topLevel && newCommentsCount > 0 && (
+        <FloatingComments buttonRef={ref} showNewComments={showNewComments} text={text} />
+      )}
+    </>
+  )
+}

components/use-visibility.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+
+// observe the passed element ref and return its visibility
+export default function useVisibility (elementRef, options = {}) {
+  // threshold is the percentage of the element that must be visible to be considered visible
+  // with pastElement, we consider the element not visible only when we're past it
+  const { threshold = 0, pastElement = false } = options
+  const [isVisible, setIsVisible] = useState(true)
+
+  useEffect(() => {
+    const element = elementRef.current
+    if (!element || !window.IntersectionObserver || typeof window === 'undefined') return
+
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true)
+        } else if (pastElement) {
+          setIsVisible(entry.boundingClientRect.top > 0)
+        } else {
+          setIsVisible(false)
+        }
+      }, { threshold }
+    )
+
+    // observe the passed element ref
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [threshold, elementRef, pastElement])
+
+  return isVisible
+}

fragments/comments.js

@@ -48,6 +48,7 @@ export const COMMENT_FIELDS = gql`
     ncomments
     nDirectComments
     newComments @client
+    injected @client
     imgproxyUrls
     rel
     apiKey

lib/apollo.js

@@ -323,11 +323,34 @@ function getClient (uri) {
                 }
               }
             },
+            nDirectComments: {
+              merge (existing, incoming, { variables, readField, toReference }) {
+                // if the item has new comments, don't merge the nDirectComments field
+                // preventing new comments not yet injected from being counted, thus causing bottomedOut
+                if (variables?.id && existing !== undefined) {
+                  const item = toReference({
+                    __typename: 'Item',
+                    id: variables.id
+                  })
+                  const newComments = readField('newComments', item)
+                  if (newComments?.length > 0) {
+                    return existing
+                  }
+                }
+
+                return incoming
+              }
+            },
             newComments: {
               read (newComments) {
                 return newComments || []
               }
             },
+            injected: {
+              read (injected) {
+                return injected || false
+              }
+            },
             meAnonSats: {
               read (existingAmount, { readField }) {
                 if (SSR) return null

styles/globals.scss

@@ -908,10 +908,18 @@ div[contenteditable]:focus,
   box-shadow: inset 0 0 1px 1px rgba(0, 123, 190, 0.25);
 }
 
+.outline-new-injected-comment {
+  box-shadow: inset 0 0 1px 1px rgba(0, 123, 190, 0.25);
+}
+
 .outline-new-comment.outline-new-comment-unset {
   box-shadow: none;
 }
 
+.outline-new-injected-comment.outline-new-comment-unset {
+  box-shadow: none;
+}
+
 .outline-new-comment .outline-new-comment {
   box-shadow: none;
 }