From 008908bf92c61a3f8f6251ac688930931f332a57 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Tue, 7 Feb 2023 09:39:32 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/manage/components/DialogWrapper.vue | 26 ++++++++++++++-----
 .../sass/pages/components/dialog-wrapper.scss | 12 +++++++++
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 963614f73..09945f778 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -44,6 +44,7 @@
                                 <Tag v-if="dialogData.bot" class="after" :fade="false">{{$L('机器人')}}</Tag>
                                 <Tag v-if="dialogData.group_type=='all'" class="after" :fade="false">{{$L('全员')}}</Tag>
                                 <Tag v-else-if="dialogData.group_type=='department'" class="after" :fade="false">{{$L('部门')}}</Tag>
+                                <div v-if="msgLoadIng > 0" class="load"><Loading/></div>
                             </div>
                             <ul class="title-desc">
                                 <li v-if="dialogData.type === 'user'" :class="[dialogData.online_state === true ? 'online' : 'offline']">
@@ -460,6 +461,7 @@ export default {
 
             allMsgs: [],
             tempMsgs: [],
+            msgLoadIng: 0,
 
             pasteShow: false,
             pasteFile: [],
@@ -787,7 +789,7 @@ export default {
                         this.allMsgs = this.allMsgList
                         requestAnimationFrame(this.onToBottom)
                     }
-                    this.$store.dispatch("getDialogMsgs", {
+                    this.getMsgs({
                         dialog_id,
                         msg_id: this.msgId,
                         msg_type: this.msgType,
@@ -811,7 +813,7 @@ export default {
         },
 
         msgType() {
-            this.$store.dispatch("getDialogMsgs", {
+            this.getMsgs({
                 dialog_id: this.dialogId,
                 msg_id: this.msgId,
                 msg_type: this.msgType,
@@ -845,7 +847,7 @@ export default {
             if (num <= 1) {
                 return
             }
-            this.$store.dispatch("getDialogMsgs", {
+            this.getMsgs({
                 dialog_id: this.dialogId,
                 msg_id: this.msgId,
                 msg_type: this.msgType,
@@ -1060,6 +1062,18 @@ export default {
             }
         },
 
+        getMsgs(data) {
+            return new Promise((resolve, reject) => {
+                setTimeout(_ => this.msgLoadIng++, 600)
+                this.$store.dispatch("getDialogMsgs", data)
+                    .then(resolve)
+                    .catch(reject)
+                    .finally(_ => {
+                        this.msgLoadIng--
+                    })
+            })
+        },
+
         msgFilter(item) {
             if (this.msgType) {
                 if (this.msgType === 'tag') {
@@ -1132,7 +1146,7 @@ export default {
                         })
                     }
                     this.preventToBottom = true;
-                    this.$store.dispatch("getDialogMsgs", {
+                    this.getMsgs({
                         dialog_id: this.dialogId,
                         msg_id: this.msgId,
                         msg_type: this.msgType,
@@ -1474,7 +1488,7 @@ export default {
             if (this.prevId === 0) {
                 return
             }
-            this.$store.dispatch('getDialogMsgs', {
+            this.getMsgs({
                 dialog_id: this.dialogId,
                 msg_id: this.msgId,
                 msg_type: this.msgType,
@@ -1679,7 +1693,7 @@ export default {
                     const nearMsg = this.allMsgs[i + (key === 'next_id' ? 1 : -1)]
                     if (nearMsg && nearMsg.id != rangeValue) {
                         this.preventMoreLoad = true
-                        this.$store.dispatch("getDialogMsgs", {
+                        this.getMsgs({
                             dialog_id: this.dialogId,
                             msg_id: this.msgId,
                             msg_type: this.msgType,
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index aa480ef1f..78eb6116c 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -194,6 +194,18 @@
                             font-weight: 500;
                             padding-left: 6px;
                         }
+
+                        .load {
+                            flex-shrink: 0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            margin-left: 6px;
+                            .common-loading {
+                                width: 16px;
+                                height: 16px;
+                            }
+                        }
                     }
 
                     .title-desc {