diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 3e6ad48c..e87a9f67 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/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)} > ` } - + 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' }); } - + } diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 54171ceb..63ca362f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/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 + } ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 4c8c0882..3abb5599 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/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` +
+ +
+ ` : ''}