more rendering is implemented

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -12,11 +12,7 @@
   [modifyOverflowStyleOfParentScroll]="false"
   (vsChange)="onVsChange($event)"
 >
-  <div
+  <div #chatMessagesContainer class="chat-messages">
-    #chatMessagesContainer
-    class="chat-messages hide"
-    [style.opacity]="fixScreen ? 0 : 1"
-  >
     <div
       *ngIf="eventRemained && eventList.length > 0"
       class="message-row view-previous"
@@ -83,3 +79,9 @@
     </div>
   </div>
 </virtual-scroller>
+
+<div
+  #chatMessagesBuffer
+  fxFlexFill
+  class="chat-messages-buffer disappear"
+></div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -189,3 +189,15 @@ $meBox-bg: #ffffff;
 .hide {
   opacity: 0 !important;
 }
+
+.disappear {
+  display: none !important;
+}
+
+.chat-messages-buffer {
+  position: absolute;
+  top: 0px;
+  overflow-y: hidden !important;
+  padding: 30px 40px;
+  flex-direction: column;
+}

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -108,6 +108,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
   @ViewChild('chatMessagesContainer', { static: false })
   chatMessagesContainer: ElementRef<HTMLElement>;
 
+  @ViewChild('chatMessagesBuffer', { static: false })
+  chatMessagesBuffer: ElementRef<HTMLElement>;
+
   @ViewChild(PerfectScrollbarDirective, { static: false })
   psChatContent: PerfectScrollbarDirective;
 
@@ -142,7 +145,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
   moment = moment;
 
   existReadHere = false;
-  fixScreen = false;
 
   constructor(
     private logger: NGXLogger,
@@ -382,11 +384,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
   }
 
   scrollToStoredItem() {
-    if (!this.scrollUpInitalized) {
-      this.chatMessagesContainer.nativeElement.classList.remove('hide');
-    }
-
     this.virtualScroller.scrollInto(this.storedScrollItem, true, 0, 0, () => {
+      this.chatMessagesBuffer.nativeElement.innerHTML = '';
+      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+
+      this.chatMessagesBuffer.nativeElement.classList.add('disappear');
+      this.chatMessagesContainer.nativeElement.classList.remove('hide');
+
       this.storedScrollItem = undefined;
     });
   }
@@ -472,10 +476,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
 
     if (!!this.virtualScroller) {
       const e = this.eventList.find(v => v.seq === eventSeq);
-      this.fixScreen = true;
+      this.virtualScroller.scrollInto(e, false, undefined, 0, () => {});
-      this.virtualScroller.scrollInto(e, false, undefined, 0, () => {
-        this.fixScreen = false;
-      });
     }
   }
 
@@ -491,6 +492,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
       // this.storedScrollItem = this.psChatContent.elementRef.nativeElement.scrollHeight;
       this.storeScrollPosition();
 
+      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
+
+      this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
+      this.chatMessagesContainer.nativeElement.classList.add('hide');
+      this.changeDetectorRef.detectChanges();
+
       this.moreEvent.emit(this.eventList[0].seq);
 
       this.virtualScroller.invalidateCachedMeasurementAtIndex(0);