fix(buttons): pass down loading state from items

Author: dvcol

src/components/common/list/ListButtonCheckin.vue

@@ -15,6 +15,7 @@ import { useI18n } from '~/utils/i18n.utils';
 
 const { disabled, item } = defineProps<{
   disabled?: boolean;
+  loading?: boolean;
   item?: ListScrollItem;
   buttonProps?: ButtonProps;
   iconProps?: IconProps;
@@ -56,13 +57,13 @@ const onClick = async () => {
   }
 };
 
-const { loading } = useWatchingStoreRefs();
+const { loading: watchLoading } = useWatchingStoreRefs();
 </script>
 
 <template>
   <ListButton
     :disabled="disabled"
-    :loading="loading"
+    :loading="loading || watchLoading"
     :colored="watching"
     :button-props="{ type: 'error', ...buttonProps }"
     :icon-props="{ component: watching ? IconCancel : IconConfirmCircle, ...iconProps }"

src/components/common/list/ListButtonCollected.vue

@@ -37,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+  },
   disableFetch: {
     type: Boolean,
     required: false,
@@ -55,7 +59,7 @@ const emit = defineEmits<{
   (e: 'onClick', payload: { query: AddOrRemoveQuery; request: Promise<unknown> }): void;
 }>();
 
-const { disabled, disableFetch, item, dateType } = toRefs(props);
+const { disabled, disableFetch, item, dateType, loading } = toRefs(props);
 
 const { collected, date: dateCollected } = useItemCollected(item);
 
@@ -76,6 +80,7 @@ const { loadingCollected } = useMovieStoreRefs();
 const { getShowCollectionLoading } = useShowStore();
 
 const isLoading = computed(() => {
+  if (loading?.value) return true;
   if (isListLoading.value) return true;
   if (item.value.type === 'movie') return loadingCollected.value;
   if (!item.value?.meta?.ids?.show?.trakt) return false;

src/components/common/list/ListButtonList.vue

@@ -31,6 +31,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+  },
   disableFetch: {
     type: Boolean,
     required: false,
@@ -52,12 +56,13 @@ const emit = defineEmits<{
   ): void;
 }>();
 
-const { disabled, disableFetch, item, list } = toRefs(props);
+const { disabled, disableFetch, item, list, loading } = toRefs(props);
 
 const { isItemListLoading, addToOrRemoveFromList, isItemInList, fetchListItems } =
   useListStore();
 
 const isLoading = computed(() => {
+  if (loading.value) return true;
   if (!item.value?.id) return;
   if (!isListItemType(item.value.type)) return;
   return isItemListLoading({

src/components/common/list/ListButtonWatched.vue

@@ -37,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  loading: {
+    type: Boolean,
+    required: false,
+  },
   disableFetch: {
     type: Boolean,
     required: false,
@@ -55,7 +59,7 @@ const emit = defineEmits<{
   (e: 'onClick', payload: { query: AddOrRemoveQuery; request: Promise<unknown> }): void;
 }>();
 
-const { disabled, disableFetch, item, dateType } = toRefs(props);
+const { disabled, disableFetch, item, dateType, loading } = toRefs(props);
 
 const { played, date: datePlayed } = useItemPlayed(item);
 
@@ -76,6 +80,7 @@ const { loadingWatched } = useMovieStoreRefs();
 const { getShowProgressLoading } = useShowStore();
 
 const isLoading = computed(() => {
+  if (loading?.value) return true;
   if (isListLoading.value) return true;
   if (item.value.type === 'movie') return loadingWatched.value;
   if (!item.value?.meta?.ids?.show?.trakt) return false;

src/components/common/list/ListButtons.vue

@@ -22,6 +22,7 @@ const { item, disabled, route } = defineProps<{
   item: ListScrollItem;
   route: Route;
   disabled?: boolean;
+  loading?: boolean;
 }>();
 
 type Query<T extends QuickActions> = T extends typeof QuickAction.Checkin
@@ -68,6 +69,7 @@ const onClick = <T extends QuickActions>(
     v-if="actions?.[QuickAction.List] && list"
     :list="list"
     :disabled="disabled"
+    :loading="loading"
     :disable-fetch="route === Route.Watchlist"
     :item="item"
     @on-click="e => onClick(QuickAction.List, e)"
@@ -76,19 +78,22 @@ const onClick = <T extends QuickActions>(
     v-if="actions?.[QuickAction.Collect]"
     :date-type="collectionDate"
     :disabled="disabled"
+    :loading="loading"
     :item="item"
     @on-click="e => onClick(QuickAction.Collect, e)"
   />
   <ListButtonWatched
     v-if="actions?.[QuickAction.Watch]"
     :date-type="watchedDate"
     :disabled="disabled"
+    :loading="loading"
     :item="item"
     @on-click="e => onClick(QuickAction.Watch, e)"
   />
   <ListButtonCheckin
     v-if="actions?.[QuickAction.Checkin] && isEpisodeOrMovie(item.type)"
     :disabled="disabled"
+    :loading="loading"
     :item="item"
     @on-click="e => onClick(QuickAction.Checkin, e)"
   />

src/components/common/list/ListItem.vue

@@ -343,10 +343,11 @@ const onClick = (e: MouseEvent | KeyboardEvent) =>
           >
             <slot
               name="buttons"
+              :item="item"
               :open="open"
               :dragged="dragged"
               :focusin="focusin"
-              :item="item"
+              :loading="loading"
             />
           </NButtonGroup>
         </NFlex>

src/components/views/calendar/CalendarComponent.vue

@@ -91,10 +91,11 @@ const { onItemClick } = usePanelItem();
       @on-scroll-top="onScrollTop"
       @on-scroll-bottom="onScrollBottom"
     >
-      <template #buttons="{ open, item }">
+      <template #buttons="{ open, item, loading: itemLoading }">
         <ListButtons
           v-if="isListItemType(item?.type)"
           :disabled="!open"
+          :loading="itemLoading"
           :item="item"
           :route="Route.Calendar"
         />

src/components/views/history/HistoryComponent.vue

@@ -98,10 +98,11 @@ useActiveAndDocumentVisible({
       @onload-more="onLoadMore"
       @on-item-click="onItemClick"
     >
-      <template #buttons="{ open, item }">
+      <template #buttons="{ open, item, loading: itemLoading }">
         <ListButtons
           v-if="isListItemType(item?.type)"
           :disabled="!open"
+          :loading="itemLoading"
           :item="item"
           :route="Route.History"
         />

src/components/views/progress/ProgressComponent.vue

@@ -119,10 +119,11 @@ useActiveAndDocumentVisible({
         @on-scroll-top="scrolled = false"
         @on-item-click="onItemClick"
       >
-        <template #buttons="{ open, item }">
+        <template #buttons="{ open, item, loading: itemLoading }">
           <ListButtons
             v-if="isListItemType(item?.type)"
             :disabled="!open"
+            :loading="itemLoading"
             :item="item"
             :route="Route.Progress"
           />

src/components/views/search/SearchComponent.vue

@@ -70,10 +70,11 @@ const { onItemClick } = usePanelItem();
       @on-scroll-bottom="onScroll"
       @on-item-click="onItemClick"
     >
-      <template #buttons="{ open, item }">
+      <template #buttons="{ open, item, loading: itemLoading }">
         <ListButtons
           v-if="isListItemType(item?.type)"
           :disabled="!open"
+          :loading="itemLoading"
           :item="item"
           :route="Route.Search"
         />

src/components/views/watchlist/WatchlistComponent.vue

@@ -117,10 +117,11 @@ useActiveAndDocumentVisible({
       @onload-more="onLoadMore"
       @on-item-click="onItemClick"
     >
-      <template #buttons="{ open, item }">
+      <template #buttons="{ open, item, loading: itemLoading }">
         <ListButtons
           v-if="isListItemType(item?.type)"
           :disabled="!open"
+          :loading="itemLoading"
           :item="item"
           :route="Route.Watchlist"
           @on-click="onButtonClick"