diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx index 0e7afef0ccf..b8074def979 100644 --- a/ts/components/conversation/Timeline.tsx +++ b/ts/components/conversation/Timeline.tsx @@ -504,6 +504,7 @@ export class Timeline extends React.PureComponent { const { unreadCount, haveNewest, + haveOldest, isLoadingMessages, items, loadNewerMessages, @@ -519,24 +520,38 @@ export class Timeline extends React.PureComponent { return; } - const { newest } = this.visibleRows; - if (!newest || !newest.id) { + const { newest, oldest } = this.visibleRows; + if (!newest || !oldest) { return; } markMessageRead(newest.id); - const rowCount = this.getRowCount(); + const newestRow = this.getRowCount() - 1; + const oldestRow = this.fromItemIndexToRow(0); - const lastId = items[items.length - 1]; + // Loading newer messages (that go below current messages) is pain-free and quick + // we'll just kick these off immediately. if ( !isLoadingMessages && !haveNewest && - newest.row > rowCount - LOAD_MORE_THRESHOLD + newest.row > newestRow - LOAD_MORE_THRESHOLD ) { + const lastId = items[items.length - 1]; loadNewerMessages(lastId); } + // Loading older messages is more destructive, as they requires a recalculation of + // all locations of things below. So we need to be careful with these loads. + // Generally we hid this behind a countdown spinner at the top of the window, but + // this is a special-case for the situation where the window is so large and that + // all the messages are visible. + const oldestVisible = oldestRow === oldest.row; + const newestVisible = newestRow === newest.row; + if (oldestVisible && newestVisible && !haveOldest) { + this.loadOlderMessages(); + } + const lastIndex = items.length - 1; const lastItemRow = this.fromItemIndexToRow(lastIndex); const areUnreadBelowCurrentPosition = Boolean( @@ -548,7 +563,7 @@ export class Timeline extends React.PureComponent { const shouldShowScrollDownButton = Boolean( !haveNewest || areUnreadBelowCurrentPosition || - newest.row < rowCount - SCROLL_DOWN_BUTTON_THRESHOLD + newest.row < newestRow - SCROLL_DOWN_BUTTON_THRESHOLD ); this.setState({