Smoothly loading messages Angular 8 - html

Question

I'm writing sort of a chat application using Angular 8 and here's what I want to achieve:
My dialogue component that represents a chat between two users gets one page of last messages that consists of 10 messages after initiating. The div that contains these messages scrolls down to the very last message. When a user scrolls up and reaches a certain point the next page loads. The two arrays join and the user sees now 20 messages. Here's what I have so far:
HTML:
<div>
<div #scrollMe [scrollTop]="scrollMe.scrollHeight" (scroll)="onScroll($event)" style="overflow-y: scroll; height: 400px;">
<ul>
<li *ngFor="let message of messages?.reverse()">
</ul>
</div>
</div>
Typescipt:
loadMessages(page: number, itemsPerPage?: number) {
this.messageService.getMessageThread(page, itemsPerPage || 10)
.subscribe((res: PaginatedResult<MessageThread>) => {
if (this.messages == null) {
this.messages = res.result.messages;
} else {
this.messages = this.messages.concat(res.result.messages);
}
});
}
onScroll(event) {
if (event.target.scrollTop < 100) {
if (this.pagination.currentPage >= this.pagination.totalPages) {
return;
}
this.loadMessages(++this.pagination.currentPage);
}
}
It works, but the problem is that when I join these two arrays, my scrollbar jumps very ugly and since I hold the scrollbar it stays at the same position and keeps loading next pages. I am very new to Angular and front-end in general so I have a feeling that I'm missing something. I tried to find any ready-to-go solutions but could not. Any help would be appreciated.
Please note that I don't want to use JQuery.

Answer 1

Several things:
First, we need a loading flag:
loading = false;
Then we make loadMessages return an observable instead of handle the result:
loadMessages(page: number, itemsPerPage?: number) {
this.loading = true;
return this.messageService.getMessageThread(page, itemsPerPage || 10);
}
A separate method handleResponse handles the response by setting loading to false and concatenating the messages.
Then we can account for the request delay in the scroll handler and use the loading flag to prevent multiple requests:
onScroll(event) {
// get the scroll height before adding new messages
const startingScrollHeight = event.target.scrollHeight;
if (event.target.scrollTop < 100) {
if (this.pagination.currentPage >= this.pagination.totalPages) {
return;
}
else if (!this.loading) {
this.loadMessages(this.pagination.currentPage).subscribe((res) => {
this.handleResponse(res);
// using setTimeout lets the app "wait a beat" so it can measure
// new scroll height *after* messages are added
setTimeout(() => {
const newScrollHeight = this.scrollDiv.nativeElement.scrollHeight;
// set the scroll height from the difference of the new and starting scroll height
this.scrollDiv.nativeElement.scrollTo(0, newScrollHeight - startingScrollHeight);
});
});
}
}
}
Stackblitz (updated)