fix: simplify loader composable and integrate with GitHub/GitLab

Remove global fetch interceptor plugin and polling state dependency. Implement explicit loader control in GitHub and GitLab composables for better predictability. Consolidate timer logic and reduce state complexity in useLoader.

Author: Pascal Klesse

projects/app/src/composables/use-github.ts

@@ -1,28 +1,45 @@
 import type { Source } from '~/base/default';
 
+import { useLoader } from '~/composables/use-loader';
+
 export function useGithub(source: Source) {
   const config = useRuntimeConfig();
   const apiUrl = source.url.includes('//api.') ? source.url : 'https://api.github.com';
+  const { start, stop } = useLoader();
 
   async function getRepos() {
+    start();
     const params: URLSearchParams = new URLSearchParams({
       page: '1',
       per_page: '150',
     });
 
-    return useFetch(`${apiUrl}/user/repos?${params}`, {
+    const result = useFetch(`${apiUrl}/user/repos?${params}`, {
       headers: {
         Authorization: `Bearer ${source.token}`,
       },
     });
+
+    result.finally(() => {
+      stop();
+    });
+
+    return result;
   }
 
   async function getBranches(fullName: string) {
-    return useFetch(`${apiUrl}/repos/${fullName}/branches`, {
+    start();
+    const result = useFetch(`${apiUrl}/repos/${fullName}/branches`, {
       headers: {
         Authorization: `Bearer ${source.token}`,
       },
     });
+
+    result.finally(() => {
+      stop();
+    });
+
+    return result;
   }
 
   async function checkWebhookExist(fullName: string) {

projects/app/src/composables/use-gitlab.ts

@@ -1,38 +1,55 @@
 import type { Source } from '~/base/default';
 
+import { useLoader } from '~/composables/use-loader';
+
 export function useGitlab(source: Source) {
   const config = useRuntimeConfig();
   const apiUrl = source.url.includes('/api/') ? source.url : source.url + '/api/v4';
+  const { start, stop } = useLoader();
 
   async function getGroups() {
+    start();
     const params: URLSearchParams = new URLSearchParams({
       page: '1',
       per_page: '100',
     });
 
-    return useFetch(`${apiUrl}/groups?${params}`, {
+    const result = useFetch(`${apiUrl}/groups?${params}`, {
       headers: {
         'Access-Control-Allow-Headers': '*',
         'Access-Control-Allow-Origin': '*',
         Authorization: `Bearer ${source.token}`,
       },
     });
+
+    result.finally(() => {
+      stop();
+    });
+
+    return result;
   }
 
   async function getProjects() {
+    start();
     const params: URLSearchParams = new URLSearchParams({
       membership: 'true',
       page: '1',
       per_page: '100',
     });
 
-    return useFetch(`${apiUrl}/projects?${params}`, {
+    const result = useFetch(`${apiUrl}/projects?${params}`, {
       headers: {
         'Access-Control-Allow-Headers': '*',
         'Access-Control-Allow-Origin': '*',
         Authorization: `Bearer ${source.token}`,
       },
     });
+
+    result.finally(() => {
+      stop();
+    });
+
+    return result;
   }
 
   async function getProjectById(id: string) {
@@ -46,33 +63,47 @@ export function useGitlab(source: Source) {
   }
 
   async function getBranches(id: string) {
+    start();
     const params: URLSearchParams = new URLSearchParams({
       page: '1',
       per_page: '100',
     });
 
-    return useFetch(`${apiUrl}/projects/${id}/repository/branches?${params}`, {
+    const result = useFetch(`${apiUrl}/projects/${id}/repository/branches?${params}`, {
       headers: {
         'Access-Control-Allow-Headers': '*',
         'Access-Control-Allow-Origin': '*',
         Authorization: `Bearer ${source.token}`,
       },
     });
+
+    result.finally(() => {
+      stop();
+    });
+
+    return result;
   }
 
   async function getReleases(id: string) {
+    start();
     const params: URLSearchParams = new URLSearchParams({
       page: '1',
       per_page: '100',
     });
 
-    return useFetch(`${apiUrl}/projects/${id}/releases?${params}`, {
+    const result = useFetch(`${apiUrl}/projects/${id}/releases?${params}`, {
       headers: {
         'Access-Control-Allow-Headers': '*',
         'Access-Control-Allow-Origin': '*',
         Authorization: `Bearer ${source.token}`,
       },
     });
+
+    result.finally(() => {
+      stop();
+    });
+
+    return result;
   }
 
   async function checkWebhookExist(id: string) {
@@ -109,7 +140,7 @@ export function useGitlab(source: Source) {
       return { data: { id: webhookExist.id } };
     }
 
-    const body: any = {
+    const body: Record<string, unknown> = {
       merge_requests_events: true,
       push_events: true,
       releases_events: true,

projects/app/src/composables/use-loader.ts

@@ -1,39 +1,21 @@
-import { usePollingState } from '~/states/polling';
-
 // ============================================================================
 // Constants
 // ============================================================================
 const SHOW_DELAY = 150;
 const MIN_DURATION = 300;
 
 // ============================================================================
-// Global State (shared across all components)
+// Global State (module-level singleton)
 // ============================================================================
-const loaderState = () => useState<number>('loader_active_requests', () => 0);
-const loaderVisible = () => useState<boolean>('loader_visible', () => false);
+const activeRequests = ref<number>(0);
+const isVisible = ref<boolean>(false);
 
-// Timer references (module-level for singleton behavior)
+// Timer references
 let showDelayTimer: ReturnType<typeof setTimeout> | null = null;
 let minDurationTimer: ReturnType<typeof setTimeout> | null = null;
-let visibleSince: number = 0;
+let visibleSince = 0;
 
 export function useLoader() {
-  // ============================================================================
-  // Composables
-  // ============================================================================
-  const { isPolling } = usePollingState();
-
-  // ============================================================================
-  // Variables
-  // ============================================================================
-  const activeRequests = loaderState();
-  const isVisible = loaderVisible();
-
-  // ============================================================================
-  // Computed Properties
-  // ============================================================================
-  const shouldShow = computed<boolean>(() => activeRequests.value > 0 && !isPolling.value);
-
   // ============================================================================
   // Functions
   // ============================================================================
@@ -53,102 +35,63 @@ export function useLoader() {
   }
 
   /**
-   * Show the loader after delay
-   */
-  function scheduleShow(): void {
-    if (showDelayTimer || isVisible.value) {
-      return;
-    }
-
-    showDelayTimer = setTimeout(() => {
-      showDelayTimer = null;
-      if (shouldShow.value) {
-        isVisible.value = true;
-        visibleSince = Date.now();
-      }
-    }, SHOW_DELAY);
-  }
-
-  /**
-   * Hide the loader, respecting minimum duration
-   */
-  function scheduleHide(): void {
-    if (!isVisible.value) {
-      clearTimers();
-      return;
-    }
-
-    const elapsed: number = Date.now() - visibleSince;
-    const remaining: number = MIN_DURATION - elapsed;
-
-    if (remaining <= 0) {
-      isVisible.value = false;
-      clearTimers();
-    } else {
-      if (minDurationTimer) {
-        return;
-      }
-
-      minDurationTimer = setTimeout(() => {
-        minDurationTimer = null;
-        if (!shouldShow.value) {
-          isVisible.value = false;
-        }
-      }, remaining);
-    }
-  }
-
-  /**
-   * Update visibility based on current state
+   * Update loader visibility with anti-flicker logic
    */
   function updateVisibility(): void {
-    if (shouldShow.value && !isVisible.value) {
-      scheduleShow();
-    } else if (!shouldShow.value && isVisible.value) {
-      scheduleHide();
-    } else if (!shouldShow.value && !isVisible.value) {
+    const shouldShow: boolean = activeRequests.value > 0;
+
+    if (shouldShow && !isVisible.value && !showDelayTimer) {
+      // Schedule showing after delay
+      showDelayTimer = setTimeout(() => {
+        showDelayTimer = null;
+        if (activeRequests.value > 0) {
+          isVisible.value = true;
+          visibleSince = Date.now();
+        }
+      }, SHOW_DELAY);
+    } else if (!shouldShow && isVisible.value) {
+      // Hide with minimum duration
+      const elapsed: number = Date.now() - visibleSince;
+      const remaining: number = MIN_DURATION - elapsed;
+
+      if (remaining <= 0) {
+        isVisible.value = false;
+        clearTimers();
+      } else if (!minDurationTimer) {
+        minDurationTimer = setTimeout(() => {
+          minDurationTimer = null;
+          if (activeRequests.value === 0) {
+            isVisible.value = false;
+          }
+        }, remaining);
+      }
+    } else if (!shouldShow && !isVisible.value) {
       clearTimers();
     }
   }
 
   /**
-   * Increment active request count
+   * Start loading indicator
    */
-  function increment(): void {
+  function start(): void {
     activeRequests.value++;
     updateVisibility();
   }
 
   /**
-   * Decrement active request count
+   * Stop loading indicator
    */
-  function decrement(): void {
+  function stop(): void {
     if (activeRequests.value > 0) {
       activeRequests.value--;
     }
     updateVisibility();
   }
 
-  /**
-   * Legacy: Start loading (alias for increment)
-   */
-  function start(): void {
-    increment();
-  }
-
-  /**
-   * Legacy: Stop loading (alias for decrement)
-   */
-  function stop(): void {
-    decrement();
-  }
-
   // ============================================================================
   // Return
   // ============================================================================
   return {
-    decrement,
-    increment,
     loading: readonly(isVisible),
     start,
     stop,