Add loading indicator

This commit is contained in:
the1812 2023-04-16 16:22:32 +08:00
parent 2982028501
commit ab0981ff9c
4 changed files with 77 additions and 34 deletions

View File

@ -1,11 +1,36 @@
<template> <template>
<div class="bangumi-compact-rank-list">compact rank list</div> <div class="fresh-home-compact-rank-list" :class="{ loading, loaded }">
<div v-if="!loaded" class="fresh-home-compact-rank-list-loading-container">
<VLoading v-if="loading" />
<div
v-if="(error || items.length === 0) && !loading"
class="fresh-home-compact-rank-list-empty"
>
<VEmpty />
<VButton class="fresh-home-compact-rank-list-refresh-button" round @click="reload">
<VIcon icon="mdi-refresh" />
刷新
</VButton>
</div>
</div>
<template v-if="loaded"> content </template>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { requestMixin } from '../../../../mixin' import { VIcon, VLoading, VEmpty, VButton } from '@/ui'
import { cssVariableMixin, requestMixin } from '../../../../mixin'
import { compactRankListCssVars } from './rank-list'
export default Vue.extend({ export default Vue.extend({
mixins: [requestMixin()], components: {
// DpiImage,
// UpInfo,
VIcon,
VLoading,
VEmpty,
VButton,
},
mixins: [requestMixin(), cssVariableMixin(compactRankListCssVars)],
props: { props: {
parseJson: { parseJson: {
type: Function, type: Function,
@ -16,8 +41,16 @@ export default Vue.extend({
</script> </script>
<style lang="scss"> <style lang="scss">
@import 'common'; @import 'common';
@import './rank-list';
.bangumi-compact-rank-list { .fresh-home-compact-rank-list {
@include v-stretch(); @include v-stretch();
width: var(--panel-width);
height: var(--panel-height);
min-height: var(--panel-height);
padding: var(--padding);
margin: calc(0px - var(--padding));
@include rank-list-common();
} }
</style> </style>

View File

@ -163,12 +163,13 @@ export default Vue.extend({
</script> </script>
<style lang="scss"> <style lang="scss">
@import 'common'; @import 'common';
@import './rank-list';
.fresh-home-rank-list { .fresh-home-rank-list {
position: relative; position: relative;
flex: 1; flex: 1;
width: 400px;
overflow: hidden; overflow: hidden;
width: var(--panel-width);
min-height: var(--panel-height); min-height: var(--panel-height);
height: var(--panel-height); height: var(--panel-height);
padding: var(--padding); padding: var(--padding);
@ -374,34 +375,6 @@ export default Vue.extend({
color: var(--foreground-color); color: var(--foreground-color);
} }
} }
& &-loading-container { @include rank-list-common();
@include v-center();
justify-content: center;
padding: var(--padding);
border-radius: var(--home-card-radius);
border: 2px dashed #8884;
height: 100%;
}
& &-empty {
@include v-center(12px);
justify-content: center;
.be-button {
padding: 4px 10px 4px 6px !important;
&:hover .be-icon {
transform: rotate(1turn);
}
}
.be-icon {
margin-right: 6px;
transition: 0.5s ease-out;
}
}
&.loaded {
@include no-scrollbar();
.animation {
animation-play-state: running;
}
}
} }
</style> </style>

View File

@ -0,0 +1,31 @@
@mixin rank-list-common {
& &-loading-container {
@include v-center();
justify-content: center;
padding: var(--padding);
border-radius: var(--home-card-radius);
border: 2px dashed #8884;
height: 100%;
}
& &-empty {
@include v-center(12px);
justify-content: center;
.be-button {
padding: 4px 10px 4px 6px !important;
&:hover .be-icon {
transform: rotate(1turn);
}
}
.be-icon {
margin-right: 6px;
transition: 0.5s ease-out;
}
}
&.loaded {
@include no-scrollbar();
.animation {
animation-play-state: running;
}
}
}

View File

@ -11,6 +11,7 @@ export interface RankListCard {
dynamic?: string dynamic?: string
} }
export const rankListCssVars = { export const rankListCssVars = {
panelWidth: 400,
panelHeight: 608, panelHeight: 608,
padding: 12, padding: 12,
rankItemHeight: 110, rankItemHeight: 110,
@ -23,3 +24,8 @@ export const rankListCssVars = {
thirdCoverHeight: 90, thirdCoverHeight: 90,
thirdCoverWidth: 139, thirdCoverWidth: 139,
} }
export const compactRankListCssVars = {
panelWidth: 400,
panelHeight: 608,
padding: 12,
}