fix(loading): improve list loading indicator

Author: dvcol

src/components/common/list/ListItem.vue

@@ -94,6 +94,10 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showTagLoader: {
+    type: Boolean,
+    required: false,
+  },
 });
 
 const emit = defineEmits<{
@@ -233,6 +237,7 @@ const onClick = () => emit('onItemClick', { item: item?.value });
             :show-progress="showProgress"
             :show-played="showPlayed"
             :show-collected="showCollected"
+            :show-tag-loader="showTagLoader"
           >
             <slot :item="item" :loading="loading" />
           </ListItemPanel>

src/components/common/list/ListItemPanel.vue

@@ -73,6 +73,10 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showTagLoader: {
+    type: Boolean,
+    required: false,
+  },
 });
 
 const { item, hideDate, showProgress, showPlayed, showCollected } = toRefs(props);
@@ -256,38 +260,64 @@ const onTagClick = (url?: string) => {
   >
     <div ref="innerContainer">
       <div class="meta type">
-        <NSkeleton v-if="loading" style="width: 10%" round />
+        <NSkeleton
+          v-if="loading"
+          style="width: 45px; height: 14px; margin-bottom: 0.25rem"
+          round
+        />
         <AnchorLink v-else text v-bind="item?.typeLink">
           <NEllipsis :line-clamp="1" :tooltip="tooltipOptions">{{ type }}</NEllipsis>
         </AnchorLink>
       </div>
       <div class="title">
-        <NSkeleton v-if="loading" text style="width: 70%" round />
+        <NSkeleton v-if="loading" text style="width: 70%; height: 16px" round />
         <AnchorLink v-else text v-bind="item?.titleLink">
           <NEllipsis :line-clamp="2" :tooltip="tooltipOptions">
             {{ title }}
           </NEllipsis>
         </AnchorLink>
       </div>
       <div class="content">
-        <NSkeleton v-if="loading" text style="width: 60%" round />
+        <NSkeleton
+          v-if="loading"
+          text
+          style="width: 60%; height: 14px; margin: 0.25rem 0"
+          round
+        />
         <AnchorLink v-else text v-bind="item?.contentLink">
           <NEllipsis :line-clamp="contentHeight" :tooltip="tooltipOptions">
             {{ content }}
           </NEllipsis>
         </AnchorLink>
       </div>
       <NFlex
-        v-if="(!hideTime && date) || tags?.length || showCollected || showPlayed"
+        v-if="
+          (!hideTime && date) ||
+          (loading && showTagLoader) ||
+          tags?.length ||
+          showCollected ||
+          showPlayed
+        "
         size="medium"
         class="tags"
       >
-        <template v-for="(tag, i) of tags" :key="`${i}-${tag.label}`">
-          <NSkeleton v-if="loading" text style="width: 6%" />
-          <TagLink :tag="tag" @on-click="onTagClick" />
+        <template v-if="loading && showTagLoader">
+          <NSkeleton text style="width: 120px; height: 18px" />
+        </template>
+        <template v-else>
+          <template v-for="(tag, i) of tags" :key="`${i}-${tag.label}`">
+            <NSkeleton v-if="loading" text style="width: 6%" />
+            <TagLink :tag="tag" @on-click="onTagClick" />
+          </template>
         </template>
+
         <template v-if="!hideTime && date">
-          <NSkeleton v-if="loading" key="date-loader" text style="width: 8%" />
+          <NSkeleton
+            v-if="loading"
+            key="date-loader"
+            text
+            style="width: 42px; height: 18px"
+          />
           <NTag
             v-else
             key="date"
@@ -300,7 +330,12 @@ const onTagClick = (url?: string) => {
           </NTag>
         </template>
         <template v-if="showCollected && collected">
-          <NSkeleton v-if="loading" key="collected-loader" text style="width: 3%" />
+          <NSkeleton
+            v-if="loading"
+            key="collected-loader"
+            text
+            style="width: 22px; height: 18px"
+          />
           <NTag
             v-else
             key="collected"
@@ -319,7 +354,12 @@ const onTagClick = (url?: string) => {
           </NTag>
         </template>
         <template v-if="showPlayed && played">
-          <NSkeleton v-if="loading" key="played-loader" text style="width: 3%" />
+          <NSkeleton
+            v-if="loading"
+            key="played-loader"
+            text
+            style="width: 22px; height: 18px"
+          />
           <NTag
             v-else
             key="played"
@@ -337,8 +377,20 @@ const onTagClick = (url?: string) => {
           </NTag>
         </template>
       </NFlex>
-      <div v-if="showProgress && !loading" class="panel-progress">
-        <ProgressTooltip :progress="progress" :to="innerContainer" placement="top-end">
+      <div v-if="showProgress" class="panel-progress">
+        <NSkeleton
+          v-if="loading"
+          key="progress-loader"
+          text
+          style="display: flex; width: 100%; height: 4px"
+          round
+        />
+        <ProgressTooltip
+          v-else
+          :progress="progress"
+          :to="innerContainer"
+          placement="top-end"
+        >
           <NProgress
             class="line"
             :data-show-id="progress?.id"

src/components/common/list/ListScroll.vue

@@ -97,6 +97,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  showTagLoader: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const emits = defineEmits<{
@@ -257,6 +262,7 @@ const listPaddingBottom = computed(() => listOptions?.value?.paddingBottom ?? 32
           :show-progress="showProgress"
           :show-played="showPlayed"
           :show-collected="showCollected"
+          :show-tag-loader="showTagLoader"
           @on-hover="onHover"
           @on-item-click="(...args) => $emit('onItemClick', ...args)"
           @on-scroll-into-view="(...args) => $emit('onScrollIntoView', ...args)"

src/components/views/calendar/CalendarComponent.vue

@@ -71,6 +71,7 @@ const { onItemClick } = usePanelItem();
       backdrop
       show-played
       show-collected
+      show-tag-loader
       overscroll="none"
       :scroll-into-view="centerItem?.id ? [centerItem?.id] : []"
       @on-item-click="onItemClick"

src/components/views/progress/ProgressComponent.vue

@@ -103,6 +103,7 @@ watchUserChange({
         hide-date
         show-progress
         show-collected
+        show-tag-loader
         @on-scroll="scrolled = true"
         @on-scroll-top="scrolled = false"
         @on-item-click="onItemClick"