fix(loading): fix calendar loading indicator

Author: dvcol

src/stores/data/history.store.ts

@@ -110,7 +110,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
 
     Logger.debug('Fetching History', { page, limit, start, end });
     loading.value = true;
-    const { clearLoading } = debounceLoading(history, loadingPlaceholder, !page);
+    const { clearLoading } = debounceLoading(history, loadingPlaceholder, { clear: !page });
     const query: TraktHistoryGetQuery = {
       pagination: { page, limit },
       start_at: start?.toISOString(),

src/stores/data/list.store.ts

@@ -346,7 +346,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
     if (!parallel) loading.value = true;
     typeLoading[list.type] = true;
     listDictionaryLoading[list.id.toString()] = true;
-    const { clearLoading } = debounceLoading(listItems, loadingPlaceholder, !page, 1000);
+    const { clearLoading } = debounceLoading(listItems, loadingPlaceholder, { clear: !page, time: 1000 });
 
     try {
       const response = await fetchItems(list, { pagination: { page, limit } });

src/stores/data/progress.store.ts

@@ -114,7 +114,7 @@ export const useProgressStore = defineStore('data.progress', () => {
 
     Logger.debug('Fetching progress');
     loading.value = true;
-    const { clearLoading } = debounceLoading(progress, loadingPlaceholder, true);
+    const { clearLoading } = debounceLoading(progress, loadingPlaceholder, { clear: true });
     try {
       progress.value = await fetchProgressData();
       evicted.progress = false;

src/stores/data/search.store.ts

@@ -134,7 +134,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
     Logger.debug('Fetching search results', { types: types.value, query: query.value, search: search.value });
 
     loading.value = true;
-    const { clearLoading } = debounceLoading(searchResults, loadingPlaceholder, !page);
+    const { clearLoading } = debounceLoading(searchResults, loadingPlaceholder, { clear: !page });
     const request: TraktSearch = {
       type: types.value,
       escape: !query.value,

src/utils/calendar.utils.ts

@@ -12,6 +12,7 @@ import {
   type VirtualListRef,
   type VirtualListScrollToOptions,
 } from '~/models/list-scroll.model';
+import { defaultDebounceLoadingDelay } from '~/utils/store.utils';
 
 export type CalendarItem = (TraktCalendarShow | TraktCalendarMovie | Record<never, never>) & {
   id: ListScrollItem['id'];
@@ -29,7 +30,7 @@ export const getPlaceholder = (date: Date) => ({ ...CalendarPlaceholder, id: `em
 export const getLoadingPlaceholder = (date: Date) =>
   ({ ...getPlaceholder(date), id: `loading-${date.getTime()}`, type: ListScrollItemType.loading }) as CalendarItem;
 
-export const getEmptyWeeks = ({ startDate, loading = false, days = 14 }: { startDate: Date; loading?: boolean; days?: number }) => {
+export const getEmptyWeeks = ({ startDate, loading = false, days = 14 }: { startDate: Date; loading?: boolean; days?: number }): CalendarItem[] => {
   return Array(days)
     .fill(CalendarPlaceholder)
     .map((_, index) => {
@@ -162,10 +163,17 @@ export const useCalendar = ({
 
   const onScrollTop = async () => {
     const first = list.value[0];
-    await fetchData('start');
+    const fetching = fetchData('start');
 
+    const timeout = setTimeout(() => {
+      listRef.value?.list.scrollTo({ top: 145 });
+    }, defaultDebounceLoadingDelay); // default debounceLoading delay
+
+    await fetching;
+
+    clearTimeout(timeout);
     listRef.value?.list.scrollTo({
-      top: (list.value.findIndex(item => item.id === first.id) - 1) * 145,
+      top: list.value.findIndex(item => item.id === first.id) * 145,
     });
   };
 

src/utils/store.utils.ts

@@ -127,9 +127,19 @@ export const useDebouncedSearch = (search: Ref<string>, delay = 350, disabled?:
   return debouncedSearch;
 };
 
-export const debounceLoading = <T>(data: Ref<T[]>, placeholder: Ref<T[]>, clear?: boolean, time = 100) => {
+export const defaultDebounceLoadingDelay = 100;
+export type DebounceLoadingOptions<T> = { clear?: boolean; time?: number; splice?: (_data: T[], _placeholder: T[]) => T[] };
+export const debounceLoading = <T>(
+  data: Ref<T[]>,
+  placeholder: Ref<T[]>,
+  {
+    clear,
+    time = defaultDebounceLoadingDelay,
+    splice = (_data: T[], _placeholder: T[]) => [..._data, ..._placeholder],
+  }: DebounceLoadingOptions<T> = {},
+) => {
   const timeout = setTimeout(() => {
-    data.value = clear ? placeholder.value : [...data.value, ...placeholder.value];
+    data.value = clear ? placeholder.value : splice(data.value, placeholder.value);
   }, time);
   return {
     timeout,