fix(list): only trigger updated when view is active

Author: dvcol

src/components/common/list/ListScroll.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { NFlex, NTimeline, NVirtualList } from 'naive-ui';
 
-import { ref, toRefs } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 
 import type { TraktClientPagination } from '@dvcol/trakt-http-client/models';
 import type { PropType, Ref, Transition } from 'vue';
@@ -141,12 +141,13 @@ const onHover = ({ item, hover }: { item: ListScrollItem; hover: boolean }) => {
 const onLoadMore = (payload: { page: number; pageCount: number; pageSize: number }) => {
   emits('onloadMore', { listRef, ...payload });
 };
+const isEmpty = computed(() => !items.value.length && !loading.value);
 </script>
 
 <template>
   <Transition name="fade" mode="out-in">
     <NVirtualList
-      v-if="items.length || loading"
+      v-if="!isEmpty"
       ref="listRef"
       class="list-scroll"
       :data-length="items.length"

src/components/common/list/use-list-scroll.ts

@@ -235,7 +235,14 @@ export const useListScrollEvents = (
     pagination,
     loading,
     belowThreshold,
-  }: { data: Ref<ListScrollItem[]>; pagination: Ref<TraktClientPagination | undefined>; loading: Ref<boolean>; belowThreshold?: Ref<boolean> },
+    active,
+  }: {
+    data: Ref<ListScrollItem[]>;
+    pagination: Ref<TraktClientPagination | undefined>;
+    loading: Ref<boolean>;
+    belowThreshold?: Ref<boolean>;
+    active?: Ref<boolean>;
+  },
 ) => {
   const onScroll: OnScroll = async listRef => {
     const key = data.value[data.value.length - 1].id;
@@ -252,10 +259,18 @@ export const useListScrollEvents = (
 
   /**
    * This is a workaround for the onUpdated lifecycle hook not triggering when wrapped in transition.
+   * It fires when the list is updated and checks if the list is scrolled to the bottom to trigger the next page load.
    */
   const onUpdated: OnUpdated = listRef => {
     const { scrollHeight, clientHeight } = listRef.value?.$el?.firstElementChild ?? {};
-    if (scrollHeight !== clientHeight || !belowThreshold?.value || loading.value) return;
+    // If  already loading we don't trigger
+    if (loading.value) return;
+    // If the list is not scrolled to the bottom we don't trigger
+    if (scrollHeight !== clientHeight) return;
+    // If the list is not below the threshold we don't trigger
+    if (belowThreshold?.value === false) return;
+    // If the view is not currently active we don't trigger
+    if (active?.value === false) return;
 
     return onLoadMore();
   };

src/components/views/history/HistoryComponent.vue

@@ -25,34 +25,35 @@ const { isWatching } = useWatchingStoreRefs();
 
 const i18n = useI18n('history');
 
-watchUserChange({
+const { active } = watchUserChange({
   fetch: fetchHistory,
   clear: clearState,
 });
 
-onMounted(() => {
-  watch(panelOpen, async value => {
-    if (!value && panelDirty.value) await fetchHistory();
-  });
-  watch(isWatching, async () => {
-    if (panelOpen.value) return;
-    await fetchHistory();
-  });
-});
-
 const list = useListScroll(filteredHistory, 'watched_at');
 
 const history = addLoadMore(list, pagination, searchHistory);
 
+const { scrolled, listRef, onClick } = useBackToTop();
+const { onItemClick } = usePanelItem();
+
 const { onScroll, onUpdated, onLoadMore } = useListScrollEvents(fetchHistory, {
   data: history,
   pagination,
   loading,
   belowThreshold,
+  active,
 });
 
-const { scrolled, listRef, onClick } = useBackToTop();
-const { onItemClick } = usePanelItem();
+onMounted(() => {
+  watch(panelOpen, async value => {
+    if (!value && panelDirty.value) await fetchHistory();
+  });
+  watch(isWatching, async () => {
+    if (panelOpen.value) return;
+    await fetchHistory();
+  });
+});
 </script>
 
 <template>

src/components/views/watchlist/WatchlistComponent.vue

@@ -41,18 +41,11 @@ const { activeList } = useListsStoreRefs();
 const { scrolled, listRef, onClick } = useBackToTop();
 const { onItemClick } = usePanelItem();
 
-watchUserChange({
+const { active } = watchUserChange({
   fetch: fetchListItems,
   clear: clearState,
 });
 
-onMounted(() => {
-  watch(panelOpen, async value => {
-    if (!value && panelDirty.value) await fetchListItems();
-  });
-  watch(activeList, () => onClick());
-});
-
 const list = useListScroll<AnyList, AnyListDateTypes>(
   filteredListItems,
   anyListDateGetter,
@@ -65,6 +58,14 @@ const { onScroll, onUpdated, onLoadMore } = useListScrollEvents(fetchListItems,
   pagination,
   loading: listLoading,
   belowThreshold,
+  active,
+});
+
+onMounted(() => {
+  watch(panelOpen, async value => {
+    if (!value && panelDirty.value) await fetchListItems();
+  });
+  watch(activeList, () => onClick());
 });
 </script>