Highlight newly added replies in thread view (#36237)

This commit is contained in:
diondiondion 2025-09-24 11:27:33 +02:00 committed by GitHub
parent 23a69e3bd7
commit 059bf1e980
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 28 additions and 1 deletions

View file

@ -5,6 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { withRouter } from 'react-router-dom';
import { difference } from 'lodash';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
@ -150,6 +151,11 @@ class Status extends ImmutablePureComponent {
fullscreen: false,
showMedia: defaultMediaVisibility(this.props.status),
loadedStatusId: undefined,
/**
* Holds the ids of newly added replies, excluding the initial load.
* Used to highlight newly added replies in the UI
*/
newRepliesIds: [],
};
UNSAFE_componentWillMount () {
@ -462,6 +468,7 @@ class Status extends ImmutablePureComponent {
previousId={i > 0 ? list[i - 1] : undefined}
nextId={list[i + 1] || (ancestors && statusId)}
rootId={statusId}
shouldHighlightOnMount={this.state.newRepliesIds.includes(id)}
/>
));
}
@ -495,11 +502,20 @@ class Status extends ImmutablePureComponent {
}
componentDidUpdate (prevProps) {
const { status, ancestorsIds } = this.props;
const { status, ancestorsIds, descendantsIds } = this.props;
if (status && (ancestorsIds.length > prevProps.ancestorsIds.length || prevProps.status?.get('id') !== status.get('id'))) {
this._scrollStatusIntoView();
}
// Only highlight replies after the initial load
if (prevProps.descendantsIds.length) {
const newRepliesIds = difference(descendantsIds, prevProps.descendantsIds);
if (newRepliesIds.length) {
this.setState({newRepliesIds});
}
}
}
componentWillUnmount () {