fix(loading): rework util to make it composable

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 timeout = debounceLoading(history, loadingPlaceholder, !page);
+    const { clearLoading } = debounceLoading(history, loadingPlaceholder, !page);
     const query: TraktHistoryGetQuery = {
       pagination: { page, limit },
       start_at: start?.toISOString(),
@@ -129,7 +129,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
       history.value = history.value.filter(h => h.id >= 0);
       throw e;
     } finally {
-      clearTimeout(timeout);
+      clearLoading();
       loading.value = false;
     }
   };

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 timeout = debounceLoading(listItems, loadingPlaceholder, !page);
+    const { clearLoading } = debounceLoading(listItems, loadingPlaceholder, !page, 1000);
 
     try {
       const response = await fetchItems(list, { pagination: { page, limit } });
@@ -364,7 +364,7 @@ export const useListStore = defineStore(ListStoreConstants.Store, () => {
       listItems.value = listItems.value.filter(l => l.type !== ListScrollItemType.loading);
       throw e;
     } finally {
-      clearTimeout(timeout);
+      clearLoading();
       if (!parallel) loading.value = false;
       typeLoading[list.type] = false;
       listDictionaryLoading[list.id.toString()] = false;

src/stores/data/progress.store.ts

@@ -114,7 +114,7 @@ export const useProgressStore = defineStore('data.progress', () => {
 
     Logger.debug('Fetching progress');
     loading.value = true;
-    const timeout = debounceLoading(progress, loadingPlaceholder, true);
+    const { clearLoading } = debounceLoading(progress, loadingPlaceholder, true);
     try {
       progress.value = await fetchProgressData();
       evicted.progress = false;
@@ -132,7 +132,7 @@ export const useProgressStore = defineStore('data.progress', () => {
       NotificationService.error('Failed to fetch progress', error);
       throw error;
     } finally {
-      clearTimeout(timeout);
+      clearLoading();
       loading.value = 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 timeout = debounceLoading(searchResults, loadingPlaceholder, !page);
+    const { clearLoading } = debounceLoading(searchResults, loadingPlaceholder, !page);
     const request: TraktSearch = {
       type: types.value,
       escape: !query.value,
@@ -159,7 +159,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
       searchErrors[JSON.stringify(request)] = ErrorCount.fromDictionary(searchErrors, JSON.stringify(request), e);
       throw e;
     } finally {
-      clearTimeout(timeout);
+      clearLoading();
       loading.value = false;
     }
   };

src/utils/store.utils.ts

@@ -127,10 +127,15 @@ export const useDebouncedSearch = (search: Ref<string>, delay = 350, disabled?:
   return debouncedSearch;
 };
 
-export const debounceLoading = <T>(data: Ref<T[]>, placeholder: Ref<T[]>, clear?: boolean) =>
-  setTimeout(() => {
+export const debounceLoading = <T>(data: Ref<T[]>, placeholder: Ref<T[]>, clear?: boolean, time = 100) => {
+  const timeout = setTimeout(() => {
     data.value = clear ? placeholder.value : [...data.value, ...placeholder.value];
-  }, 100);
+  }, time);
+  return {
+    timeout,
+    clearLoading: () => clearTimeout(timeout),
+  };
+};
 
 export const useWaitReady = () => {
   let resolve: (value: boolean) => void;