fix(list): pause list render on panel open to prevent flicker

Author: dvcol

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

@@ -1,6 +1,6 @@
 import { type TraktClientPagination, TraktEpisodeType, type TraktEpisodeTypes } from '@dvcol/trakt-http-client/models';
 
-import { computed, isRef, ref } from 'vue';
+import { computed, isRef, ref, watch } from 'vue';
 
 import type { Ref } from 'vue';
 
@@ -181,51 +181,82 @@ export const getTags = (item: Pick<ListScrollSourceItem, 'episode' | 'season'>,
   return tags;
 };
 
+export const computeNewArray = <T extends ListScrollSourceItemWithDate<D>, D extends string | never = never>(
+  array: T[],
+  dateFn?: D | ((item: T) => T[D]),
+): ListScrollItem[] =>
+  array.map((item, index) => {
+    const _item: ListScrollItem<ListScrollItemMeta> = {
+      ...item,
+      index,
+      key: `${index}-${item.id}`,
+      loading: (typeof item.id === 'number' && item.id < 0) || item.type === ListScrollItemType.loading,
+    };
+
+    if (!_item.type) _item.type = getType(item);
+    if (!_item.title) _item.title = getTitle(item);
+    if (!_item.content) _item.content = getContent(item);
+    if (!_item.posterRef) _item.posterRef = ref<string>();
+    if (!_item.getPosterQuery) _item.getPosterQuery = getPosterQuery(item, _item.type);
+    if (!_item.getProgressQuery) _item.getProgressQuery = getProgressQuery(item);
+    if (!_item.tags) _item.tags = getTags(item, _item.type);
+
+    _item.date = getDate(item, array, index, dateFn);
+    _item.meta = {
+      source: item,
+      ids: {
+        movie: item.movie?.ids,
+        show: item.show?.ids,
+        season: item.season?.ids,
+        episode: item.episode?.ids,
+        person: item.person?.ids,
+      },
+    };
+
+    if (_item.type === 'episode' || _item.type === 'season') {
+      _item.meta!.number = {
+        season: item.episode?.season ?? item.season?.number,
+        episode: item.episode?.number,
+      };
+    }
+
+    return _item;
+  });
+
 export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D extends string | never = never>(
   items: Ref<T[]>,
   dateFn?: D | ((item: T) => T[D]),
 ): Ref<ListScrollItem[]> => {
   return computed<ListScrollItem[]>(() => {
     const array = items.value;
     if (!array.length) return [];
-    return array.map((item, index) => {
-      const _item: ListScrollItem<ListScrollItemMeta> = {
-        ...item,
-        index,
-        key: `${index}-${item.id}`,
-        loading: (typeof item.id === 'number' && item.id < 0) || item.type === ListScrollItemType.loading,
-      };
-
-      if (!_item.type) _item.type = getType(item);
-      if (!_item.title) _item.title = getTitle(item);
-      if (!_item.content) _item.content = getContent(item);
-      if (!_item.posterRef) _item.posterRef = ref<string>();
-      if (!_item.getPosterQuery) _item.getPosterQuery = getPosterQuery(item, _item.type);
-      if (!_item.getProgressQuery) _item.getProgressQuery = getProgressQuery(item);
-      if (!_item.tags) _item.tags = getTags(item, _item.type);
-
-      _item.date = getDate(item, array, index, dateFn);
-      _item.meta = {
-        source: item,
-        ids: {
-          movie: item.movie?.ids,
-          show: item.show?.ids,
-          season: item.season?.ids,
-          episode: item.episode?.ids,
-          person: item.person?.ids,
-        },
-      };
-
-      if (_item.type === 'episode' || _item.type === 'season') {
-        _item.meta!.number = {
-          season: item.episode?.season ?? item.season?.number,
-          episode: item.episode?.number,
-        };
-      }
+    return computeNewArray(array, dateFn);
+  });
+};
 
-      return _item;
-    });
+export const useBufferedListScroll = <T extends ListScrollSourceItemWithDate<D>, D extends string | never = never>(
+  items: Ref<T[]>,
+  dateFn?: D | ((item: T) => T[D]),
+  paused: Ref<boolean> = ref(false),
+): {
+  paused: Ref<boolean>;
+  list: Ref<ListScrollItem[]>;
+} => {
+  const list: Ref<ListScrollItem[]> = useListScroll(items, dateFn);
+  let previous: ListScrollItem[] = [];
+  watch([list, paused], () => {
+    if (paused.value) return;
+    previous = list.value;
   });
+
+  return {
+    paused,
+    list: computed<ListScrollItem[]>(() => {
+      console.info('paused', paused.value, { previous, list: list.value });
+      if (paused.value) return previous;
+      return list.value;
+    }),
+  };
 };
 
 export const useListScrollEvents = (

src/components/views/panel/MoviePanel.vue

@@ -142,12 +142,15 @@ const activeLists = computed(() => {
     .map(list => list.id);
 });
 
+const { panelDirty } = useAppStateStoreRefs();
+
 const onListUpdate = async (value: ListEntity['id'], remove: boolean) => {
   if (!movie.value?.ids) return;
 
   const _list = myLists.value.find(list => list.id === value);
   if (!_list) return;
 
+  panelDirty.value = true;
   await addToOrRemoveFromList({
     list: _list,
     itemType: 'movie',
@@ -158,8 +161,6 @@ const onListUpdate = async (value: ListEntity['id'], remove: boolean) => {
 
 const releaseDate = computed(() => movie.value?.released);
 
-const { panelDirty } = useAppStateStoreRefs();
-
 const onCollectionUpdate = async (
   value: PanelButtonsOptions,
   date?: string | number | Date,

src/components/views/watchlist/WatchlistComponent.vue

@@ -6,7 +6,7 @@ import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
 import ListScroll from '~/components/common/list/ListScroll.vue';
 import {
   addLoadMore,
-  useListScroll,
+  useBufferedListScroll,
   useListScrollEvents,
 } from '~/components/common/list/use-list-scroll';
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
@@ -49,9 +49,10 @@ const { active } = watchUserChange({
   clear: clearState,
 });
 
-const list = useListScroll<AnyList, AnyListDateTypes>(
+const { list } = useBufferedListScroll<AnyList, AnyListDateTypes>(
   filteredListItems,
   anyListDateGetter,
+  panelOpen,
 );
 
 const listItems = addLoadMore(list, pagination, searchList);