fix(loading): make loading hysteresis customisable

Author: dvcol

src/components/views/settings/SettingsTabs.vue

@@ -15,6 +15,7 @@ import IconClose from '~/components/icons/IconCloseSmall.vue';
 import IconPencil from '~/components/icons/IconPencil.vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
+import { loadingHysteresisOptions } from '~/models/loading-hysteresis.model';
 import { pageSizeOptions, pageSizeOptionsWithZero } from '~/models/page-size.model';
 import { ProgressType } from '~/models/progress-type.model';
 import { Route } from '~/models/router.model';
@@ -53,6 +54,7 @@ const {
   progressType,
   enableRatings,
   backgroundColor,
+  loadingHysteresis,
 } = useExtensionSettingsStoreRefs();
 
 const { getIcon, fetchLists } = useListsStore();
@@ -75,6 +77,14 @@ const listOptions = computed<ListOption[]>(() =>
   })),
 );
 
+const loadingOption = computed(() =>
+  loadingHysteresisOptions.map(({ label, value }) => ({
+    label:
+      typeof label === 'string' ? i18n(label, 'common', 'loading', 'hysteresis') : label,
+    value,
+  })),
+);
+
 const renderLabel = (option: ListOption) => [
   h(NIcon, {
     style: {
@@ -139,29 +149,6 @@ const onColor = () => {
 
 <template>
   <div ref="container" class="tabs-container">
-    <!--  Default tab  -->
-    <SettingsFormItem :label="i18n('label_default_tab')">
-      <div class="form-button">
-        <input ref="picker" v-model="backgroundColor" type="color" class="color-picker" />
-        <NButtonGroup
-          class="color-picker-button-group"
-          :style="{ '--color-picker': backgroundColor }"
-        >
-          <NButton round tertiary @click="onColor">
-            Picker
-            <template #icon>
-              <NIcon><IconPencil /></NIcon>
-            </template>
-          </NButton>
-          <NButton circle tertiary type="error" @click="backgroundColor = 'transparent'">
-            <template #icon>
-              <NIcon><IconClose /></NIcon>
-            </template>
-          </NButton>
-        </NButtonGroup>
-      </div>
-    </SettingsFormItem>
-
     <!--  Default tab  -->
     <SettingsFormItem :label="i18n('label_default_tab')">
       <NSelect
@@ -187,6 +174,38 @@ const onColor = () => {
         multiple
       />
     </SettingsFormItem>
+    <!--  Loading bar  -->
+    <SettingsFormItem :label="i18n('label_loading_bar')">
+      <NSelect
+        v-model:value="loadingHysteresis"
+        class="loading-bar"
+        :to="container"
+        :options="loadingOption"
+      />
+    </SettingsFormItem>
+
+    <!--  Background color  -->
+    <SettingsFormItem :label="i18n('label_background_color')">
+      <div class="form-button">
+        <input ref="picker" v-model="backgroundColor" type="color" class="color-picker" />
+        <NButtonGroup
+          class="color-picker-button-group"
+          :style="{ '--color-picker': backgroundColor }"
+        >
+          <NButton round tertiary @click="onColor">
+            Picker
+            <template #icon>
+              <NIcon><IconPencil /></NIcon>
+            </template>
+          </NButton>
+          <NButton circle tertiary type="error" @click="backgroundColor = 'transparent'">
+            <template #icon>
+              <NIcon><IconClose /></NIcon>
+            </template>
+          </NButton>
+        </NButtonGroup>
+      </div>
+    </SettingsFormItem>
 
     <!--  Restore tab  -->
     <SettingsFormItem :label="i18n('label_restore_tab')">
@@ -396,6 +415,10 @@ const onColor = () => {
   min-width: 5.5rem;
 }
 
+.loading-bar {
+  width: 10rem;
+}
+
 .hidden-form-item {
   max-height: 0;
   overflow: hidden;

src/i18n/en/common/loading-hysteresis.json

@@ -0,0 +1,38 @@
+{
+  "common__loading__hysteresis__disabled": {
+    "message": "Disabled",
+    "description": "The loading bar is disabled"
+  },
+  "common__loading__hysteresis__0": {
+    "message": "Immediate",
+    "description": "The loading bar is Immediate"
+  },
+  "common__loading__hysteresis__100": {
+    "message": "100ms",
+    "description": "The loading bar is delayed by 100ms"
+  },
+  "common__loading__hysteresis__200": {
+    "message": "200ms",
+    "description": "The loading bar is delayed by 200ms"
+  },
+  "common__loading__hysteresis__500": {
+    "message": "500ms",
+    "description": "The loading bar is delayed by 300ms"
+  },
+  "common__loading__hysteresis__1000": {
+    "message": "1 second",
+    "description": "The loading bar is delayed by 1 second"
+  },
+  "common__loading__hysteresis__2000": {
+    "message": "2 seconds",
+    "description": "The loading bar is delayed by 2 seconds"
+  },
+  "common__loading__hysteresis__5000": {
+    "message": "5 seconds",
+    "description": "The loading bar is delayed by 5 seconds"
+  },
+  "common__loading__hysteresis__10000": {
+    "message": "10 seconds",
+    "description": "The loading bar is delayed by 10 seconds"
+  }
+}

src/i18n/en/settings/settings-tabs.json

@@ -1,4 +1,12 @@
 {
+  "settings__tabs__label_background_color": {
+    "message": "Background Color",
+    "description": "Label for the 'Background Color' setting"
+  },
+  "settings__tabs__label_loading_bar": {
+    "message": "Loading Bar Hysteresis",
+    "description": "Label for the 'Loading Bar Hysteresis' setting"
+  },
   "settings__tabs__label_default_tab": {
     "message": "Default tab",
     "description": "Label for the 'Default tab' setting"

src/models/loading-hysteresis.model.ts

@@ -0,0 +1,13 @@
+import type { SelectOption } from 'naive-ui';
+
+export const loadingHysteresisOptions: SelectOption[] = [
+  { label: 'disabled', value: -1 } as const,
+  { label: '0', value: 0 } as const,
+  { label: '100', value: 100 } as const,
+  { label: '200', value: 200 } as const,
+  { label: '500', value: 500 } as const,
+  { label: '1000', value: 1000 } as const,
+  { label: '2000', value: 2000 } as const,
+  { label: '5000', value: 5000 } as const,
+  { label: '10000', value: 10000 } as const,
+] as const;

src/models/page-size.model.ts

@@ -10,11 +10,11 @@ export const PageSize: Record<string, number> = {
 } as const;
 
 export const pageSizeOptions: SelectOption[] = [
-  { label: '50', value: 50 },
-  { label: '100', value: 100 },
-  { label: '200', value: 200 },
-  { label: '500', value: 500 },
-  { label: '1000', value: 1000 },
+  { label: '50', value: 50 } as const,
+  { label: '100', value: 100 } as const,
+  { label: '200', value: 200 } as const,
+  { label: '500', value: 500 } as const,
+  { label: '1000', value: 1000 } as const,
 ] as const;
 
 export const pageSizeOptionsWithZero: SelectOption[] = [{ label: '0', value: 0 }, ...pageSizeOptions] as const;

src/services/loading-bar.service.ts

@@ -6,33 +6,53 @@ import { Logger } from '~/services/logger.service';
 
 export class LoadingBarService {
   private static instance: ReturnType<typeof useLoadingBar>;
-  private static loading = ref(false);
+  private static counter = ref(0);
 
   static init(instance: ReturnType<typeof useLoadingBar>) {
     this.instance = instance;
   }
 
   static get isLoading() {
-    return this.loading.value;
+    return this.counter.value > 0;
   }
 
-  static start() {
-    if (!this.instance?.start) Logger.warn('LoadingBarService instance is not initialized');
+  private static increment(value = 1) {
+    this.counter.value += value;
+  }
+
+  private static decrement(value = 1) {
+    if (this.counter.value - value < 0) {
+      this.counter.value = 0;
+      return Logger.error('LoadingBarService counter is negative, resetting to 0');
+    }
+    this.counter.value -= value;
+  }
+
+  private static debounceStart(debounce: number) {
+    return setTimeout(() => {
+      if (this.isLoading) this.instance.start();
+    }, debounce);
+  }
+
+  static start(debounce: number = 0) {
+    this.increment();
+    if (!this.instance?.start) return Logger.warn('LoadingBarService instance is not initialized');
+    if (debounce) return this.debounceStart(debounce);
     this.instance.start();
-    this.loading.value = true;
   }
 
   static finish() {
     if (!this.isLoading) return;
-    if (!this.instance?.finish) Logger.warn('LoadingBarService instance is not initialized');
+    this.decrement();
+    if (this.isLoading) return;
+    if (!this.instance?.finish) return Logger.warn('LoadingBarService instance is not initialized');
     this.instance.finish();
-    this.loading.value = false;
   }
 
   static error() {
     if (!this.isLoading) return;
-    if (!this.instance?.error) Logger.warn('LoadingBarService instance is not initialized');
+    this.counter.value = 0;
+    if (!this.instance?.error) return Logger.warn('LoadingBarService instance is not initialized');
     this.instance.error();
-    this.loading.value = false;
   }
 }

src/services/trakt.service.ts

@@ -75,6 +75,7 @@ import { traktClientSettings } from '~/settings/trakt.api';
 import { useAppStateStore } from '~/stores/app-state.store';
 import { useSimklStore } from '~/stores/data/simkl.store';
 import { useAuthSettingsStore } from '~/stores/settings/auth.store';
+import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useUserSettingsStore } from '~/stores/settings/user.store';
 import { CachePrefix, TraktChromeCacheStore } from '~/utils/cache.utils';
 import { cancellablePaginatedWriteJson, getCachedProgressEndpoint, getSessionUser } from '~/utils/trakt-service.utils';
@@ -211,15 +212,14 @@ export class TraktService {
   }
 
   static async loadingBar<T>(query: Promise<T> | CancellablePromise<T>) {
-    const timeout = setTimeout(() => LoadingBarService.start(), 1000);
+    const { loadingHysteresis } = useExtensionSettingsStore();
+    if (loadingHysteresis >= 0) LoadingBarService.start(loadingHysteresis);
     try {
       await query;
-      LoadingBarService.finish();
+      if (loadingHysteresis >= 0) LoadingBarService.finish();
     } catch (error) {
-      LoadingBarService.error();
+      if (loadingHysteresis >= 0) LoadingBarService.error();
       ErrorService.registerError(error);
-    } finally {
-      clearTimeout(timeout);
     }
   }
 
@@ -239,11 +239,7 @@ export class TraktService {
 
     this.simklClient.onCall(async call => {
       Logger.debug('SimklClient.onCall', call);
-      try {
-        await call.query;
-      } catch (error) {
-        ErrorService.registerError(error);
-      }
+      await this.loadingBar(call.query);
     });
 
     this.tmdbClient.onAuthChange(async _auth => {

src/stores/settings/extension.store.ts

@@ -47,6 +47,7 @@ type ExtensionSettings = {
   progressType: ProgressTypes;
   enableRatings: boolean;
   backgroundColor: string;
+  loadingHysteresis: number;
 };
 
 const ExtensionSettingsConstants = {
@@ -66,6 +67,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const progressType = ref<ExtensionSettings['progressType']>(ProgressType.Show);
   const enableRatings = ref(false);
   const backgroundColor = ref('transparent');
+  const loadingHysteresis = ref(-1);
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
@@ -88,6 +90,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         progressType: progressType.value,
         enableRatings: enableRatings.value,
         backgroundColor: backgroundColor.value,
+        loadingHysteresis: loadingHysteresis.value,
       }),
     500,
   );
@@ -121,6 +124,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
       });
     }
     if (restored?.backgroundColor !== undefined) backgroundColor.value = restored.backgroundColor;
+    if (restored?.loadingHysteresis !== undefined) loadingHysteresis.value = restored.loadingHysteresis;
 
     if (!chromeRuntimeId) routeDictionary[Route.Progress] = false;
   };
@@ -230,6 +234,13 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         saveState().catch(err => Logger.error('Failed to save background color extension settings', { value, err }));
       },
     }),
+    loadingHysteresis: computed({
+      get: () => loadingHysteresis.value,
+      set: (value: number) => {
+        loadingHysteresis.value = value;
+        saveState().catch(err => Logger.error('Failed to save loading hysteresis extension settings', { value, err }));
+      },
+    }),
   };
 });