add oldmessage fetch loader

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -67,6 +67,7 @@ class ChatPage extends LitElement {
             chatEditorNewChat: { type: Object },
             userLanguage: { type: String },
             lastMessageRefVisible: { type: Boolean },
+            isLoadingOldMessages: {type: Boolean}
         }
     }
 
@@ -873,11 +874,15 @@ class ChatPage extends LitElement {
         .sendMessage=${(val) => this._sendMessage(val)}
         .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
         .emojiPicker=${this.emojiPicker} 
+        ?isLoadingMessages=${this.isLoadingOldMessages}
+        .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
         >
         </chat-scroller>
         `
     }
-
+    setIsLoadingMessages(val){
+        this.isLoadingOldMessages = val
+    }
     async getUpdateComplete() {
         await super.getUpdateComplete();
         const marginElements = Array.from(this.shadowRoot.querySelectorAll('chat-scroller'));
@@ -886,8 +891,7 @@ class ChatPage extends LitElement {
     }
 
     async getOldMessage(scrollElement) {
-       
-
+ 
         if (this.isReceipient) {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -910,14 +914,17 @@ class ChatPage extends LitElement {
                 return a.timestamp
                     - b.timestamp
             })
+            this.isLoadingOldMessages = false
             await this.getUpdateComplete();
             const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
 
             const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference)
+          
             if(findElement){
                 findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
             }
-
+           
+        
         } else {
             const getInitialMessages = await parentEpml.request('apiCall', {
                 type: 'api',
@@ -941,14 +948,15 @@ class ChatPage extends LitElement {
                 return a.timestamp
                     - b.timestamp
             })
+            this.isLoadingOldMessages = false
             await this.getUpdateComplete();
             const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'));
             const findElement = marginElements.find((item)=> item.messageObj.reference === scrollElement.messageObj.reference)
-          
+            
             if(findElement){
                 findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
             }
-            
+         
 
         }
 

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -435,4 +435,9 @@ export const chatStyles = css`
 		align-items: center;
 		height: 100%;
 	}
+	.spinnerContainer {
+		display: flex;
+		width: 100%;
+		justify-content: center
+	}
 `

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -31,7 +31,9 @@ class ChatScroller extends LitElement {
             focusChatEditor: {attribute: false},
             sendMessage: {attribute: false},
             showLastMessageRefScroller: { type: Function },
-            emojiPicker: { attribute: false }
+            emojiPicker: { attribute: false },
+            isLoadingMessages: { type: Boolean},
+            setIsLoadingMessages: {attribute: false}
         }
     }
 
@@ -71,6 +73,11 @@ class ChatScroller extends LitElement {
             return messageArray;
         }, [])
         return html`
+              ${this.isLoadingMessages ?  html`
+                <div class="spinnerContainer">
+                        <paper-spinner-lite active></paper-spinner-lite>
+                        </div>
+                        ` : ''}
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
                 ${formattedMessages.map((formattedMessage) => {
@@ -101,6 +108,9 @@ class ChatScroller extends LitElement {
     }
 
     shouldUpdate(changedProperties) {
+        if(changedProperties.has('isLoadingMessages')){
+            return true
+        }
         // Only update element if prop1 changed.
         return changedProperties.has('messages');
       }
@@ -144,6 +154,7 @@ class ChatScroller extends LitElement {
 
     _upObserverhandler(entries) {
         if (entries[0].isIntersecting) {
+            this.setIsLoadingMessages(true)
             let _scrollElement = entries[0].target.nextElementSibling
             this._getOldMessage(_scrollElement)
         }

qortal-ui-plugins/plugins/core/components/ChatTextEditor.js

@@ -250,7 +250,6 @@ class ChatTextEditor extends LitElement {
     }
 
 	async firstUpdated() {
-        console.log(this.placeholder, "here500");
         if (this.hasGlobalEvents) {
             this.addGlobalEventListener();
         }
@@ -301,7 +300,6 @@ class ChatTextEditor extends LitElement {
             this.chatEditor.insertText(this.editedMessageObj.message)
         }
         if (changedProperties && changedProperties.has('placeholder')) {
-            console.log(this.placeholder, "here600");
             const captionEditor = this.shadowRoot.getElementById(this.iframeId).contentWindow.document.getElementById('testingId');
             captionEditor.setAttribute('data-placeholder', this.placeholder);
         }
@@ -371,8 +369,7 @@ class ChatTextEditor extends LitElement {
     }
 
     initChatEditor() {
-        const ChatEditor = function (editorConfig) {    
-            console.log(editorConfig.placeholder, "here5600");        
+        const ChatEditor = function (editorConfig) {         
             const ChatEditor = function () {
                 const editor = this;
                 editor.init();