github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 19:23:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: dialog loading

Browse Source
This commit is contained in:
kuaifan 2023-03-03 20:34:36 +08:00
parent 55519148f1
commit 5aa31d8068
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -134,8 +134,8 @@
@on-error="onError" @on-error="onError"
@on-emoji="onEmoji" @on-emoji="onEmoji"
@on-show-emoji-user="onShowEmojiUser"> @on-show-emoji-user="onShowEmojiUser">
<template slot="header"> <template #header>
<div v-if="(allMsgs.length === 0 && loadMsg) || prevId > 0" class="dialog-item loading"><Loading type="pure"/></div> <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> <div v-else-if="allMsgs.length === 0" class="dialog-item nothing">{{$L('暂无消息')}}</div>
</template> </template>
</VirtualList> </VirtualList>

28
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -953,15 +953,8 @@
&.loading { &.loading {
height: 20px; height: 20px;
box-sizing: content-box; align-items: center;
justify-content: center; justify-content: center;
.common-pureing {
margin: 0;
width: 18px;
height: 18px;
border-width: 2px;
}
} }
&.nothing { &.nothing {
@ -1474,6 +1467,25 @@
overflow: hidden !important; 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 { body.eeui-app {
.dialog-wrapper { .dialog-wrapper {
.dialog-scroller { .dialog-scroller {