feat(review): add loading indicator

SMS-COSMO · Dec 9, 2023 · 1ef8d89 · 1ef8d89
1 parent 55b2aae
commit 1ef8d89
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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>