Enhancements to live comments #2269

Soxasora · 2025-07-07T19:49:33Z

Description

Continues #2115 and #791
UI/UX and logic enhancements to the Live Comments system

Show all new comments of a thread
Scroll to new top-level comments
Outline newly injected comments
Blue live comments dot

Media

Blue live comments dot

Show all new comments of a thread

Screen.Recording.2025-07-23.at.12.40.32.mp4

Scroll to new top-level comments

Screen.Recording.2025-07-23.at.12.44.55.mp4

Outline newly injected comments

Screen.Recording.2025-07-23.at.12.46.35.mp4

Additional Context

This PR has been split from its proposed nice-to-have changes

fixes:

correct injection of comments at the deepest semi-visible level (lacking item.comments)
traverse comment structure without going further than the visible depth COMMENT_DEPTH_LIMIT

optimizations:

avoid closure persistence on payload creation via prepareComments
less array copies
avoid duplicate ncomments counting shared logic
don't mutate payloads for different comment structures, create dedicated ones

Checklist

Are your changes backward compatible? Please answer below:
For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.

Yes, these are completely new additions, no breakage or changes on the way comments and comment injection works.

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
7, successful iterative QA for showing all new comments of a thread, floating button visibility and ux/ui enhancements

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
Yes, iterative QA

Did you introduce any new environment variables? If so, call them out explicitly here:
n/a

…new comment; cleanup: resolvers, logs

…ilds

…omments are there

…bility change, light cleanup

… comment injection

…s.js

… use of constants, general cleanup

…he correct Item query

…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

… queue comments via state

… dropped comments; ui: show amount of new comments refactor: correct function positioning; cleanup: useless logs

…Comments readFragment fallback to received comment

…ination

…ss dedupe on ShowNewComments, count nested ncomments from fresh new comments

…how the floating button only if we're past the element, not only if it's not visible

…r traces of the injected field

…mit; cleanup: consistent naming

…mments

…oads - 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

huumn · 2025-07-23T14:55:46Z

Looks great for the most part. I'm seeing some weird behavior in corner cases though.

I had two tabs, one per user, start commenting on an item without comments. For some reason, the tab that commented first did not get updates from the other tab until I refreshed the page. The console said there's a duplicate CommentFields fragment. I'm not sure if that's related but it might be.
something strange happens when I edit a comment when there show new comments on it. It behaves like we've reached the depth limit.

the language here is a bit awkward 'show all new 1 comment'

Soxasora · 2025-07-23T15:42:25Z

I had two tabs, one per user, start commenting on an item without comments. For some reason, the tab that commented first did not get updates from the other tab until I refreshed the page. The console said there's a duplicate CommentFields fragment. I'm not sure if that's related but it might be.

This is indeed weird, I'm trying to reproduce this but I can't, I'm now directly looking at how I use fragments.

something strange happens when I edit a comment when there show new comments on it. It behaves like we've reached the depth limit.

I think I found the cause, for bottomed out status we check (item.comments?.comments.length === 0 && item.nDirectComments > 0). Applying an edit triggers the mutation COMMENT_UPDATE which gets new data from the server, thus nDirectComments would grow. But it's a mixed state, it should also get comments.comments. I'm working on a fix.

the language here is a bit awkward 'show all new 1 comment'

I thought this too, let's see if I can find something actually better

…ated has pending newComments, fixes CommentEdit consequences

Soxasora · 2025-07-23T16:39:33Z

lib/apollo.js

+            nDirectComments: {
+              merge (existing, incoming, { variables, readField }) {
+                // 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 && readField('newComments')?.length > 0) {
+                  return existing
+                }
+
+                return incoming
+              }
+            },


on comment edits, upsertComment updates the cache with new values, which includes an updated nDirectComments but not comments, thus causing bottomedOut (item.comments?.comments.length === 0 && item.nDirectComments > 0) to trigger

So in the case of a comment with pending newComments, I think it's ok and harmless to ignore nDirectComments updates.

Screen.Recording.2025-07-23.at.18.36.17.mp4

edit: pushed a fix for incorrect usage of readField, it was missing 'from' where it should read this field... even though it was already reading it ... anyway, my tests shows that this works correctly.

… how many

…ctComments apollo merge

cursor

Bug: Function Fails When Comments Array Missing

The prepareComments function incorrectly assumes data.comments.comments is always an array when data.comments is present. If data.comments.comments is undefined, newComments.concat(data.comments.comments) will add undefined as an element to the array. The previous version safely handled this by falling back to an empty array.

components/show-new-comments.js#L55-L59

stacker.news/components/show-new-comments.js

Lines 55 to 59 in d3be789

    
           newComments: [], 
        
           comments: { 
        
             ...data.comments, 
        
             comments: newComments.concat(data.comments.comments) 
        
           }

Fix in Cursor • Fix in Web

Was this report helpful? Give feedback by reacting with 👍 or 👎

Soxasora and others added 30 commits April 18, 2025 05:34

check new comments every 10 seconds

f115148

enhance: clear newComments on child comments when we show a topLevel …

c813e59

…new comment; cleanup: resolvers, logs

handle comments of comments, new structure to clear newComments on ch…

c41a468

…ilds

use original recursive comments data structure

2a1e9e9

correct comment structure after deduplication

b064c63

faster newComments query deduplication, don't need to know how many c…

e0542ce

…omments are there

cleanup: comments on newComments fetches and dedupes

e307674

cleanup, use correct function declarations

beb10af

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

4add86e

ActionTooltip indicating that the user is in a live comment section

8716849

handleVisibilityChange to control polling by visibility

8f19b72

paused polling styling, check activity on 1 minute intervals and visi…

7e06381

…bility change, light cleanup

user can resume polling without refreshing the page

553592e

Merge branch 'master' into live_comments

4774022

better naming, straightforward dedupeComment on newComment arrival

e9b7b15

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

65b61ab

… comment injection

cleanup: refactor live comments related functions to use-live-comment…

8126858

…s.js

refactor: clearer naming, optimized polling and date retrieval logic,…

08bbba4

… use of constants, general cleanup

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

6f417cc

fix: make updateQuery sort-aware to correctly inject the comment in t…

274927d

…he correct Item query

fix: don't show unpaid comments; cleanup: compact cache merge/dedupe,…

e797011

… queue comments via state

fix: read new comments fragments to inject fresh new comments, fixing…

d15a024

… dropped comments; ui: show amount of new comments refactor: correct function positioning; cleanup: useless logs

enhance: queuedComments Ref, cache-and-network fetch policy; freshNew…

6a93d2a

…Comments readFragment fallback to received comment

cleanup: detailed comments and better ShowNewComment text

a29f9e3

fix: while showing new comments, also update ncomments for UI and pag…

f710457

…ination

refactor: ShowNewComments is its own component; cleanup: proven usele…

40d56fe

…ss dedupe on ShowNewComments, count nested ncomments from fresh new comments

Merge branch 'master' into live_comments

d025407

enhance: direct latest comment createdAt calc with reduce

c7095a7

cleanup queue on unmount

05785db

Soxasora and others added 11 commits July 22, 2025 10:52

cleanup: less redundancy between the two types of buttons; enhance: s…

4057efe

…how 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

8df1a20

cleanup: remove transparency of floating comments button, remove othe…

ad513c9

…r traces of the injected field

adapt and restore showing all new comments of a thread

911df45

fix: respect deepest comments structure on injection, adjust depth li…

0b13261

…mit; cleanup: consistent naming

fix: avoid double outlines because of all conditions being met

acf5a9c

cleanup: remove favicon, dedicate space for useVisibility, correct co…

d9bba7d

…mments

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

adef9c9

mark injected comments in the cache for reliable outlining

3791b87

cleanup: clearer structure, more explaining

8e3c639

Merge branch 'master' into live_comments_enhancements

71f86e8

Soxasora marked this pull request as ready for review July 23, 2025 10:48

This comment was marked as outdated.

Sign in to view

cleanup: further clarifications

f616f6e

This comment was marked as outdated.

Sign in to view

safer rootLastCommentAt usage for injected comments outlining

98b5f00

Soxasora requested a review from huumn July 23, 2025 14:06

Merge branch 'master' into live_comments_enhancements

662929e

This comment was marked as outdated.

Sign in to view

hotfix: ignore nDirectComments server updates when the item being upd…

b5b15b9

…ated has pending newComments, fixes CommentEdit consequences

This comment was marked as outdated.

Sign in to view

Soxasora commented Jul 23, 2025

View reviewed changes

Soxasora added 2 commits July 23, 2025 18:43

simpler show all new comments text for thread comments, regardless of…

a803c68

… how many

fix: reference the correct Item for newComments reading, during nDire…

d3be789

…ctComments apollo merge

cursor bot reviewed Jul 23, 2025

View reviewed changes

huumn merged commit 9092d90 into stackernews:master Jul 23, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Enhancements to live comments #2269

Enhancements to live comments #2269

Uh oh!

Soxasora commented Jul 7, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

huumn commented Jul 23, 2025

Uh oh!

Soxasora commented Jul 23, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

Soxasora Jul 23, 2025 •

edited

Loading

Uh oh!

cursor bot left a comment

Uh oh!

Uh oh!

Uh oh!

	newComments: [],
	comments: {
	...data.comments,
	comments: newComments.concat(data.comments.comments)
	}

Uh oh!

Enhancements to live comments #2269

Enhancements to live comments #2269

Uh oh!

Conversation

Soxasora commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Media

Additional Context

Checklist

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

huumn commented Jul 23, 2025

Uh oh!

Soxasora commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Soxasora Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Bug: Function Fails When Comments Array Missing

Uh oh!

Uh oh!

Uh oh!

Soxasora commented Jul 7, 2025 •

edited

Loading

Soxasora commented Jul 23, 2025 •

edited

Loading

Soxasora Jul 23, 2025 •

edited

Loading