Live updates to comment threads #2115

Soxasora · 2025-04-18T10:43:57Z

Description

Closes #791
It features a useLiveComments hook that incrementally fetches comments newer than the last commentAt timestamp, performing cache updates to the newComments field of the parent Item/Comment.

New comments can be showed with a "X new comments" button that will retrieve fresh copies of the newComments from the cache and inject them in the parent's comment field.

Media

Desktop

Screen.Recording.2025-07-01.at.22.14.53.mp4

Mobile

Untitled.mp4

Additional Context

Live comments features:

10 seconds polling
Orphan comments queuing
Top-level and nested replies dedicated flows
Duplicate prevention

Known bugs:

comments without item.comments are not subscribed to newComments

Checklist

Are your changes backwards compatible? Please answer below:
Yes

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:
6, strong QA but it might benefit from human comment testing

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

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

components/show-new-comments.js

Soxasora · 2025-07-04T13:35:53Z

Double-counting in totalNComments calculation

The prepareComments function counts of a parent (data):

Its direct new children (freshNewComments.length)
All item.comments comments nested under those new children (sum of each child's ncomments), not the comments that live in newComments.

This count is then propagated to the parent and its ancestors to update their ncomments field.

Repeated updates from multiple components: When ShowNewComments components are rendered at multiple levels of a comment tree, the ancestor comment count update logic is triggered repeatedly for the same ancestors, causing new comments to be counted multiple times.

Items/comments that resides in newComments are not counted by the ncomments field yet, as it is computed for comments inside item.comments.*

Additionally, the data.path.split('.') call in prepareComments lacks a null or undefined check for data.path, which can cause a runtime error if the path is missing or invalid.

A successful fragment that triggered the prepareComments function must have the path, this can't happen.

…ates; 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

huumn · 2025-07-05T15:52:03Z

This looks good at a glance. One thing I'd be curious to see is how it looks on mobile with deeply nested comments.

huumn · 2025-07-05T16:01:41Z

If you're at the stage where you're open to enhancement suggestions. I think it'd be cool to:

change the favicon when a tab I'm on has new comments
give blue outlines of these freshly loaded comments (like we do when you visit a thread after a first visit and there are new comments)
put this show new comment thing also at the top of the thread to load all new comments

Soxasora · 2025-07-05T16:24:44Z

Of course! These are pretty cool, going to implement them now ^^
I'll also make a mobile video example right after the new enhancements.

There's only a bug left: the deepest comment can't be updated because it lacks item.comments per item_comments_zaprank_with_me/_limited.

It's not a serious problem because you need to go to another page to see its nested comments, but the new comment indicator on view x replies on another page is a nice touch.
A workaround would be to just update the newComments field, but I'm comparing options to avoid bloat on the updateCommentFragment function... if it makes sense.

huumn · 2025-07-05T17:00:53Z

I recommend starting these enhancements in a new branch. I think this branch can live on its own.

cursor

Bug: Nested Comments Counted Twice

The totalNComments calculation double-counts nested comments. The code sums freshNewComments.length (direct new comments) and comment.ncomments (nested comments for each new comment). This results in double-counting when freshNewComments contains both a parent and its new child comment, as the child is counted directly and again as part of the parent's ncomments total.

components/show-new-comments.js#L25-L30

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

Lines 25 to 30 in 450f7bc

    
           // count the total number of new comments including its nested new comments 
        
           let totalNComments = freshNewComments.length 
        
           for (const comment of freshNewComments) { 
        
             totalNComments += (comment.ncomments || 0) 
        
           }

Fix in Cursor • Fix in Web

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

Soxasora and others added 21 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

Soxasora force-pushed the live_comments branch from 5943b3e to 907c71d Compare June 29, 2025 16:31

Soxasora and others added 8 commits June 30, 2025 00:11

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 force-pushed the live_comments branch from ecc919c to 05785db Compare July 1, 2025 22:05

Soxasora marked this pull request as ready for review July 1, 2025 22:05

This comment was marked as outdated.

Sign in to view

Soxasora commented Jul 4, 2025

View reviewed changes

components/show-new-comments.js Outdated Show resolved Hide resolved

This comment was marked as outdated.

Sign in to view

Soxasora force-pushed the live_comments branch from b4f2ae2 to efb12d6 Compare July 5, 2025 15:16

Merge branch 'master' into live_comments

450f7bc

cursor bot reviewed Jul 7, 2025

View reviewed changes

Soxasora mentioned this pull request Jul 7, 2025

Enhancements to live comments #2269

Draft


	// count the total number of new comments including its nested new comments
	let totalNComments = freshNewComments.length
	for (const comment of freshNewComments) {
	totalNComments += (comment.ncomments \|\| 0)
	}

Uh oh!

Live updates to comment threads #2115

Are you sure you want to change the base?

Live updates to comment threads #2115

Conversation

Soxasora commented Apr 18, 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!

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!

Soxasora commented Jul 4, 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!

huumn commented Jul 5, 2025

Uh oh!

huumn commented Jul 5, 2025

Uh oh!

Soxasora commented Jul 5, 2025

Uh oh!

huumn commented Jul 5, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Bug: Nested Comments Counted Twice

Uh oh!

Uh oh!

Soxasora commented Apr 18, 2025 •

edited

Loading

Soxasora commented Jul 4, 2025 •

edited

Loading