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>
<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>
<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({
mixins: [requestMixin()],
components: {
// DpiImage,
// UpInfo,
VIcon,
VLoading,
VEmpty,
VButton,
},
mixins: [requestMixin(), cssVariableMixin(compactRankListCssVars)],
props: {
parseJson: {
type: Function,
@ -16,8 +41,16 @@ export default Vue.extend({
</script>
<style lang="scss">
@import 'common';
@import './rank-list';
.bangumi-compact-rank-list {
.fresh-home-compact-rank-list {
@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>

View File

@ -163,12 +163,13 @@ export default Vue.extend({
</script>
<style lang="scss">
@import 'common';
@import './rank-list';
.fresh-home-rank-list {
position: relative;
flex: 1;
width: 400px;
overflow: hidden;
width: var(--panel-width);
min-height: var(--panel-height);
height: var(--panel-height);
padding: var(--padding);
@ -374,34 +375,6 @@ export default Vue.extend({
color: var(--foreground-color);
}
}
& &-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;
}
}
@include rank-list-common();
}
</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
}
export const rankListCssVars = {
panelWidth: 400,
panelHeight: 608,
padding: 12,
rankItemHeight: 110,
@ -23,3 +24,8 @@ export const rankListCssVars = {
thirdCoverHeight: 90,
thirdCoverWidth: 139,
}
export const compactRankListCssVars = {
panelWidth: 400,
panelHeight: 608,
padding: 12,
}