From 5aa31d8068fe0c6a6dd4ebe6698ed064621c0e4a Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 3 Mar 2023 20:34:36 +0800
Subject: [PATCH] perf: dialog loading

---
 .../pages/manage/components/DialogWrapper.vue |  4 +--
 .../sass/pages/components/dialog-wrapper.scss | 28 +++++++++++++------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 265df9c8e..9f70e6465 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -134,8 +134,8 @@
             @on-error="onError"
             @on-emoji="onEmoji"
             @on-show-emoji-user="onShowEmojiUser">
-            <template slot="header">
-                <div v-if="(allMsgs.length === 0 && loadMsg) || prevId > 0" class="dialog-item loading"><Loading type="pure"/></div>
+            <template #header>
+                <div v-if="(allMsgs.length === 0 && loadMsg) || prevId > 0" class="dialog-item loading"><div class="dialog-wrapper-loading"></div></div>
                 <div v-else-if="allMsgs.length === 0" class="dialog-item nothing">{{$L('暂无消息')}}</div>
             </template>
         </VirtualList>
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 461e63dc4..7a30d792f 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -953,15 +953,8 @@
 
             &.loading {
                 height: 20px;
-                box-sizing: content-box;
+                align-items: center;
                 justify-content: center;
-
-                .common-pureing {
-                    margin: 0;
-                    width: 18px;
-                    height: 18px;
-                    border-width: 2px;
-                }
             }
 
             &.nothing {
@@ -1474,6 +1467,25 @@
     overflow: hidden !important;
 }
 
+.dialog-wrapper-loading {
+    width: 14px;
+    height: 8px;
+    display: inline-block;
+    position: relative;
+    border-radius: 4px;
+    background: rgba($primary-text-color, 0.2);
+    animation: dialog-loading-animation 0.6s 0.3s ease infinite alternate;
+}
+
+@keyframes dialog-loading-animation {
+    0% {
+        width: 14px;
+    }
+    100% {
+        width: 24px;
+    }
+}
+
 body.eeui-app {
     .dialog-wrapper {
         .dialog-scroller {