diff --git a/stylesheets/components/SystemMessage.scss b/stylesheets/components/SystemMessage.scss index 72f8fa7a03..e127252699 100644 --- a/stylesheets/components/SystemMessage.scss +++ b/stylesheets/components/SystemMessage.scss @@ -22,8 +22,8 @@ flex-direction: column; justify-content: center; line-height: 16px; - padding-bottom: 16px; - padding-top: 16px; + padding-bottom: 10px; + padding-top: 10px; @include mixins.light-theme { color: variables.$color-gray-60; diff --git a/ts/components/conversation/Timeline.dom.stories.tsx b/ts/components/conversation/Timeline.dom.stories.tsx index 7032fd6c84..6c0b20b8c2 100644 --- a/ts/components/conversation/Timeline.dom.stories.tsx +++ b/ts/components/conversation/Timeline.dom.stories.tsx @@ -481,7 +481,10 @@ const useProps = (overrideProps: Partial = {}): PropsType => ({ }); export function OldestAndNewest(): React.JSX.Element { - const props = useProps(); + const props = useProps({ + haveOldest: true, + haveNewest: true, + }); return ; } @@ -545,12 +548,6 @@ export function TargetIndexToTop(): React.JSX.Element { return ; } -export function TypingIndicator(): React.JSX.Element { - const props = useProps({ isSomeoneTyping: true }); - - return ; -} - export function WithInvitedContactsForANewlyCreatedGroup(): React.JSX.Element { const props = useProps({ invitedContactsForNewlyCreatedGroup: [ diff --git a/ts/components/conversation/Timeline.dom.tsx b/ts/components/conversation/Timeline.dom.tsx index 06350e834a..315beda4b5 100644 --- a/ts/components/conversation/Timeline.dom.tsx +++ b/ts/components/conversation/Timeline.dom.tsx @@ -309,7 +309,7 @@ export class Timeline extends React.Component< const messageId = items[oldestUnseenIndex]; targetMessage(messageId, id); } else { - this.#scrollToItemIndex(oldestUnseenIndex); + this.#lastSeenIndicatorRef.current?.scrollIntoView(); } } else if (haveNewest) { this.#scrollToBottom(setFocus); @@ -683,6 +683,7 @@ export class Timeline extends React.Component< items: newItems, messageChangeCounter, messageLoadingState, + oldestUnseenIndex, } = this.props; const containerEl = this.#containerRef.current; @@ -742,6 +743,7 @@ export class Timeline extends React.Component< const numberToKeepAtTop = this.#maxVisibleRows * 5; const shouldDiscardNewerMessages: boolean = !this.#isAtBottom() && + oldestUnseenIndex == null && loadingStateThatJustFinished === TimelineMessageLoadingState.LoadingOlderMessages && newItems.length > numberToKeepAtTop; diff --git a/ts/groups.preload.ts b/ts/groups.preload.ts index 5635e37e0e..0359c9c4e0 100644 --- a/ts/groups.preload.ts +++ b/ts/groups.preload.ts @@ -5130,6 +5130,8 @@ function extractDiffs({ expireTimer, sourceServiceId: isReJoin ? undefined : sourceServiceId, }, + readStatus: ReadStatus.Read, + seenStatus: isFromUs ? SeenStatus.Seen : SeenStatus.Unseen, }; }