Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-12 23:47:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: artist/album screen loading state (#1860)

Browse source
This commit is contained in:
Phan An 2024-10-24 22:01:29 +07:00 committed by GitHub
parent 7af1060b8e
commit c89e1ee9fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 31 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/assets/js/components/screens/AlbumScreen.vue
View file

@ -1,5 +1,5 @@
<template>
<ScreenBase v-if="album">
<ScreenBase v-if="albumId">
<template #header>
<ScreenHeaderSkeleton v-if="loading" />
@ -44,22 +44,22 @@
<template #header>
<label :class="{ active: activeTab === 'Songs' }">
Songs
<input v-model="activeTab" name="tab" type="radio" value="Songs">
<input v-model="activeTab" :disabled="loading" name="tab" type="radio" value="Songs">
</label>
<label :class="{ active: activeTab === 'OtherAlbums' }">
Other Albums
<input v-model="activeTab" name="tab" type="radio" value="OtherAlbums">
<input v-model="activeTab" :disabled="loading" name="tab" type="radio" value="OtherAlbums">
</label>
<label v-if="useLastfm" :class="{ active: activeTab === 'Info' }">
Information
<input v-model="activeTab" name="tab" type="radio" value="Info">
<input v-model="activeTab" :disabled="loading" name="tab" type="radio" value="Info">
</label>
</template>
<div v-show="activeTab === 'Songs'" class="songs-pane">
<SongListSkeleton v-if="loading" />
<SongList
v-else
v-if="!loading && album"
ref="songList"
@press:enter="onPressEnter"
@scroll-breakpoint="onScrollBreakpoint"

10
resources/assets/js/components/screens/ArtistScreen.vue
View file

@ -1,5 +1,5 @@
<template>
<ScreenBase v-if="artist">
<ScreenBase v-if="artistId">
<template #header>
<ScreenHeaderSkeleton v-if="loading" />
@ -43,22 +43,22 @@
<template #header>
<label :class="{ active: activeTab === 'Songs' }">
Songs
<input v-model="activeTab" name="tab" type="radio" value="Songs">
<input v-model="activeTab" :disabled="loading" name="tab" type="radio" value="Songs">
</label>
<label :class="{ active: activeTab === 'Albums' }">
Albums
<input v-model="activeTab" name="tab" type="radio" value="Albums">
<input v-model="activeTab" :disabled="loading" name="tab" type="radio" value="Albums">
</label>
<label v-if="useLastfm" :class="{ active: activeTab === 'Info' }">
Information
<input v-model="activeTab" name="tab" type="radio" value="Info">
<input v-model="activeTab" :disabled="loading" name="tab" type="radio" value="Info">
</label>
</template>
<div v-show="activeTab === 'Songs'" class="songs-pane">
<SongListSkeleton v-if="loading" />
<SongList
v-else
v-if="!loading && artist"
ref="songList"
@press:enter="onPressEnter"
@scroll-breakpoint="onScrollBreakpoint"

82
resources/assets/js/components/ui/skeletons/SongListSkeleton.vue
View file

@ -1,83 +1,52 @@
<template>
<div class="skeleton">
<div class="song-list-header">
<span class="track-number">
<span class="text" />
</span>
<div class="song-list-header h-[35px] flex bg-k-bg-secondary gap-4 px-4">
<span class="title">
<span class="text" />
</span>
<span class="artist">
<span class="text" />
</span>
<span class="album">
<span class="text" />
</span>
<span class="time">
<span class="text" />
</span>
<span class="favorite" />
</div>
<div v-for="i in 40" :key="i" class="song-item">
<span class="track-number">
<span class="text pulse" />
<div v-for="i in 40" :key="i" class="flex gap-4 px-4 py-3 border-b border-k-border">
<span class="title flex gap-3">
<span class="thumbnail block h-[48px] aspect-square rounded pulse" />
<span class="flex-1 flex-col space-y-2 content-center">
<span class="block h-5 rounded-full w-4/5 pulse" />
<span class="block h-5 rounded-full w-2/5 pulse" />
</span>
</span>
<span class="title">
<span class="thumbnail pulse" />
<span class="text pulse" />
<span class="album flex-col content-center">
<span class="block h-5 w-3/5 rounded-full pulse" />
</span>
<span class="artist">
<span class="text pulse" />
</span>
<span class="album">
<span class="text pulse" />
</span>
<span class="time">
<span class="text pulse" />
</span>
<span class="favorite">
<span class="text pulse" />
<span class="time flex-col content-center">
<span class="block h-5 w-3/5 rounded-full pulse" />
</span>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="postcss" scoped>
.song-list-header {
@apply h-[35px] flex bg-k-bg-secondary;
}
.song-item {
@apply flex h-[64px] border-b border-k-border;
}
.song-list-header span span,
.pulse {
@apply inline-block h-[1.2rem] rounded-full w-4/5;
.song-list-header > span {
@apply flex items-center;
}
.song-list-header span span {
@apply bg-white/10 w-2/5;
}
span:not(.text) {
@apply p-[8px] align-middle;
}
.track-number {
@apply basis-[66px] pl-[24px];
}
.thumbnail {
@apply block w-[48px] aspect-square rounded;
@apply block h-[1.2rem] rounded-full bg-white/10 w-2/5;
}
.title {
@apply flex items-center gap-3 flex-1;
}
.artist {
@apply basis-[23%];
@apply flex-1;
}
.album {
@ -88,26 +57,17 @@ span:not(.text) {
@apply basis-[96px];
}
.favorite {
@apply basis-[36px];
}
@media screen and (max-width: 768px) {
span {
@apply hidden;
}
.title,
.artist {
.album {
@apply flex;
}
.artist .text {
@apply w-full;
}
.song-list-header,
.song-item {
.song-list-header {
@apply py-0 px-[16px];
}
}