From 6c760f159bc8d762d465064e35b565728a214b85 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 8 Sep 2022 17:08:22 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2cpu=E5=8D=A0=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/manage/components/DialogWrapper.vue |  4 +-
 .../sass/pages/components/dialog-wrapper.scss | 39 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index aa171ad7c..a85ec46dc 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -106,7 +106,9 @@
             @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/></div>
+                <div v-if="(allMsgs.length === 0 && loadMsg) || prevId > 0" class="dialog-item loading">
+                    <div class="loading-spinner"></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 6ed30fa93..78a169dd4 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -920,10 +920,45 @@
                 box-sizing: content-box;
                 justify-content: center;
 
-                .common-loading {
-                    margin: 0;
+                .loading-spinner {
+                    position: relative;
                     width: 18px;
                     height: 18px;
+                    text-indent: -9999em;
+                    border-radius: 50%;
+                    background: linear-gradient(to right, #ccc 10%, rgba(255, 255, 255, 0) 42%);
+                    animation: spinner-load 1.4s infinite linear;
+                    transform: translateZ(0);
+
+                    @keyframes spinner-load {
+                        0% {transform: rotate(0deg);}
+                        100% {transform: rotate(360deg);}
+                    }
+
+                    &:before {
+                        width: 50%;
+                        height: 50%;
+                        background: #ccc;
+                        border-radius: 100% 0 0 0;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        content: '';
+                    }
+
+                    &:after {
+                        background: #ffffff;
+                        width: 75%;
+                        height: 75%;
+                        border-radius: 50%;
+                        content: '';
+                        margin: auto;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        right: 0;
+                    }
                 }
             }