From 1ef8d89fac672b30bbdee94d8c170711efb5b8a7 Mon Sep 17 00:00:00 2001
From: zhangtianli2006 <zhangtianli2006@163.com>
Date: Sat, 9 Dec 2023 14:50:01 +0800
Subject: [PATCH] feat(review): add loading indicator

---
 pages/manage/index.vue  |  6 ++++--
 pages/manage/review.vue | 12 +++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/pages/manage/index.vue b/pages/manage/index.vue
index f77bf6d..69cd7f3 100644
--- a/pages/manage/index.vue
+++ b/pages/manage/index.vue
@@ -629,7 +629,8 @@ onMounted(async () => {
             </UiScrollArea>
           </UiTabsContent>
           <UiTabsContent value="unset">
-            <UiScrollArea class="h-[calc(100vh-17rem)]">
+            <ContentLoading v-if="listLoading" />
+            <UiScrollArea v-else class="h-[calc(100vh-17rem)]">
               <TransitionGroup name="list" tag="ul">
                 <li v-for="song in unsetList.slice(0, showLength.unset)" :key="song.id">
                   <UiContextMenu>
@@ -710,7 +711,8 @@ onMounted(async () => {
             </div>
           </UiTabsContent>
           <UiTabsContent value="rejected">
-            <UiScrollArea class="h-[calc(100vh-14rem)]">
+            <ContentLoading v-if="listLoading" />
+            <UiScrollArea v-else class="h-[calc(100vh-14rem)]">
               <TransitionGroup name="list" tag="ul">
                 <li v-for="song in rejectedList.slice(0, showLength.rejected)" :key="song.id">
                   <UiContextMenu>
diff --git a/pages/manage/review.vue b/pages/manage/review.vue
index d13fa87..d15dc54 100644
--- a/pages/manage/review.vue
+++ b/pages/manage/review.vue
@@ -129,6 +129,7 @@ async function reviewSong(song: TSong, status: TStatus) {
   selectedSong.value = unsetList.value[unsetList.value.indexOf(song) + 1];
 }
 
+const listLoading = ref(false);
 onMounted(async () => {
   try {
     await $api.user.tokenValidity.query();
@@ -137,7 +138,9 @@ onMounted(async () => {
   }
 
   try {
+    listLoading.value = true;
     songList.value = await $api.song.listUnused.query();
+    listLoading.value = false;
   } catch (err) {
     useErrorHandler(err);
   }
@@ -160,7 +163,8 @@ onMounted(async () => {
         </UiCardTitle>
       </UiCardHeader>
       <UiCardContent>
-        <UiScrollArea class="h-[calc(100vh-13rem)]">
+        <ContentLoading v-if="listLoading" class="h-[calc(100vh-13rem)]" />
+        <UiScrollArea v-else class="h-[calc(100vh-13rem)]">
           <TransitionGroup name="list" tag="ul">
             <li v-for="song in unsetList.slice(0, showLength.unset)" :key="song.id">
               <UiContextMenu>
@@ -276,7 +280,8 @@ onMounted(async () => {
             </UiTabsTrigger>
           </UiTabsList>
           <UiTabsContent value="approved">
-            <UiScrollArea class="h-[calc(100vh-14rem)]">
+            <ContentLoading v-if="listLoading" />
+            <UiScrollArea v-else class="h-[calc(100vh-14rem)]">
               <TransitionGroup name="list" tag="ul">
                 <li v-for="song in approvedList.slice(0, showLength.approved)" :key="song.id">
                   <UiContextMenu>
@@ -313,7 +318,8 @@ onMounted(async () => {
             </UiScrollArea>
           </UiTabsContent>
           <UiTabsContent value="rejected">
-            <UiScrollArea class="h-[calc(100vh-14rem)]">
+            <ContentLoading v-if="listLoading" />
+            <UiScrollArea v-else class="h-[calc(100vh-14rem)]">
               <TransitionGroup name="list" tag="ul">
                 <li v-for="song in rejectedList.slice(0, showLength.rejected)" :key="song.id">
                   <UiContextMenu>