refactor: replace useIntervalFn with sequential usePolling composable

Add usePolling composable that waits for previous request completion before scheduling next interval, preventing request stacking during slow server responses. Migrate all polling instances from useIntervalFn to usePolling with error handling and auto-pause capabilities.

Author: Pascal Klesse

projects/app/src/components/Modals/ModalBackupLog.vue

@@ -15,13 +15,7 @@ const { data, refresh } = await useAsyncGetBackupByDatabaseQuery(
 );
 const log = computed<string[]>(() => data.value?.log || []);
 
-const { pause } = useIntervalFn(() => {
-  refresh();
-}, 4000);
-
-onBeforeUnmount(() => {
-  pause();
-});
+usePolling(refresh, { interval: 4000 });
 </script>
 
 <template>

projects/app/src/components/Modals/ModalRestoreLog.vue

@@ -15,13 +15,7 @@ const { data, refresh } = await useAsyncGetBackupByDatabaseQuery(
 );
 const log = computed<string[]>(() => data.value?.restoreLog || []);
 
-const { pause } = useIntervalFn(() => {
-  refresh();
-}, 4000);
-
-onBeforeUnmount(() => {
-  pause();
-});
+usePolling(refresh, { interval: 4000 });
 </script>
 
 <template>

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

@@ -0,0 +1,149 @@
+import type { PollingOptions, PollingReturn } from '~/interfaces/polling.interface';
+
+/**
+ * Composable for sequential polling that waits for the previous request to complete
+ * before starting the next interval timer.
+ *
+ * Unlike useIntervalFn, this ensures requests don't stack up when the server
+ * is slow or network latency is high.
+ *
+ * @param fn - Async function to poll (must return a Promise)
+ * @param options - Polling configuration
+ * @returns Control methods and state refs
+ *
+ * @example
+ * ```typescript
+ * const { data, refresh } = await useAsyncGetContainerQuery({ id: containerId.value }, null);
+ *
+ * const { pause, resume, isActive, isPending } = usePolling(refresh, {
+ *   interval: 2000,
+ *   onError: (error) => console.error('Polling error:', error),
+ * });
+ * ```
+ */
+export function usePolling(fn: () => Promise<unknown>, options: PollingOptions): PollingReturn {
+  // ============================================================================
+  // Variables
+  // ============================================================================
+  const { immediate = true, interval, maxConsecutiveErrors = 3, onError } = options;
+
+  const errorCount = ref<number>(0);
+  const isActive = ref<boolean>(immediate);
+  const isPending = ref<boolean>(false);
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  // ============================================================================
+  // Functions
+  // ============================================================================
+
+  /**
+   * Schedule the next polling execution
+   */
+  function scheduleNext(): void {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      execute();
+    }, interval);
+  }
+
+  /**
+   * Execute the polling function and schedule the next call
+   */
+  async function execute(): Promise<void> {
+    if (isPending.value || !isActive.value) {
+      return;
+    }
+
+    isPending.value = true;
+
+    try {
+      await fn();
+      errorCount.value = 0;
+    } catch (error) {
+      errorCount.value++;
+
+      if (onError && error instanceof Error) {
+        onError(error);
+      }
+
+      // Auto-pause after too many consecutive errors
+      if (errorCount.value >= maxConsecutiveErrors) {
+        console.warn(`[usePolling] Paused after ${maxConsecutiveErrors} consecutive errors`);
+        isActive.value = false;
+      }
+    } finally {
+      isPending.value = false;
+
+      if (isActive.value) {
+        scheduleNext();
+      }
+    }
+  }
+
+  /**
+   * Pause polling
+   */
+  function pause(): void {
+    isActive.value = false;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  }
+
+  /**
+   * Resume polling
+   */
+  function resume(): void {
+    if (isActive.value) {
+      return;
+    }
+
+    isActive.value = true;
+    errorCount.value = 0;
+    scheduleNext();
+  }
+
+  /**
+   * Manually trigger the polling function once (outside of regular interval)
+   */
+  async function trigger(): Promise<void> {
+    if (isPending.value) {
+      return;
+    }
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+
+    await execute();
+  }
+
+  // ============================================================================
+  // Lifecycle
+  // ============================================================================
+
+  if (immediate) {
+    scheduleNext();
+  }
+
+  onBeforeUnmount(() => {
+    pause();
+  });
+
+  // ============================================================================
+  // Return
+  // ============================================================================
+  return {
+    errorCount: readonly(errorCount),
+    isActive: readonly(isActive),
+    isPending: readonly(isPending),
+    pause,
+    resume,
+    trigger,
+  };
+}

projects/app/src/interfaces/polling.interface.ts

@@ -0,0 +1,33 @@
+import type { Ref } from 'vue';
+
+/**
+ * Options for the usePolling composable
+ */
+export interface PollingOptions {
+  /** Whether polling should start immediately (default: true) */
+  immediate?: boolean;
+  /** Delay in milliseconds between completed request and next request start */
+  interval: number;
+  /** Maximum number of consecutive errors before auto-pause (default: 3) */
+  maxConsecutiveErrors?: number;
+  /** Callback when an error occurs during polling */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Return type of the usePolling composable
+ */
+export interface PollingReturn {
+  /** Number of consecutive errors */
+  errorCount: Readonly<Ref<number>>;
+  /** Whether polling is currently active */
+  isActive: Readonly<Ref<boolean>>;
+  /** Whether a request is currently pending */
+  isPending: Readonly<Ref<boolean>>;
+  /** Pause polling */
+  pause: () => void;
+  /** Resume polling */
+  resume: () => void;
+  /** Manually trigger the polling function once (outside of interval) */
+  trigger: () => Promise<void>;
+}

projects/app/src/pages/index.vue

@@ -46,9 +46,7 @@ const { open } = useModal();
 const { open: openMenu } = useContextMenu();
 const { currentUserState: user } = useAuthState();
 
-useIntervalFn(async () => {
-  await refresh();
-}, 2000);
+usePolling(refresh, { interval: 2000 });
 
 onMounted(() => {
   const expandedStorage = useLocalStorage<string[]>('expanded', []);

projects/app/src/pages/projects/[id]/[containerId].vue

@@ -88,9 +88,7 @@ if (container.value?.healthCheckCmd || container.value?.customDockerfile?.includ
   healthyState = computed(() => healthData.value);
 }
 
-useIntervalFn(async () => {
-  await refresh();
-}, 2000);
+usePolling(refresh, { interval: 2000 });
 
 onMounted(async () => {
   if (process.client) {

projects/app/src/pages/projects/[id]/[containerId]/builds.vue

@@ -23,20 +23,14 @@ const { data: buildData, refresh: refreshBuilds } = await useAsyncFindBuildsForC
 );
 const builds = computed(() => buildData.value || []);
 
-const { pause } = useIntervalFn(() => {
-  refreshBuilds();
-}, 2000);
+usePolling(refreshBuilds, { interval: 2000 });
 
 onMounted(async () => {
   if (builds.value?.length) {
     await navigateTo(`/projects/${projectId.value}/${containerId.value}/builds/${builds.value[0].id}`);
   }
 });
 
-onBeforeUnmount(() => {
-  pause();
-});
-
 function timeAgo(date: string) {
   return useTimeAgo(new Date(date)).value;
 }

projects/app/src/pages/projects/[id]/[containerId]/builds/[buildId].vue

@@ -16,15 +16,14 @@ const buildId = ref<string>(route.params.buildId ? (route.params.buildId as stri
 const { data: buildData, refresh: refreshBuild } = await useAsyncGetBuildQuery({ id: buildId.value }, null);
 const build = computed(() => buildData.value || null);
 
-const { pause } = useIntervalFn(() => {
-  if (build) {
-    refreshBuild();
-  }
-}, 2000);
-
-onBeforeUnmount(() => {
-  pause();
-});
+usePolling(
+  async () => {
+    if (build.value) {
+      await refreshBuild();
+    }
+  },
+  { interval: 2000 },
+);
 </script>
 
 <template>

projects/app/src/pages/projects/[id]/[containerId]/logs.vue

@@ -15,13 +15,7 @@ const containerId = ref<string>(route.params.containerId ? (route.params.contain
 const { data: logData, refresh: refreshLogs } = await useAsyncGetContainerQuery({ id: containerId.value }, ['logs']);
 const logs = computed(() => (logData.value?.logs as string[]) || null);
 
-const { pause } = useIntervalFn(() => {
-  refreshLogs();
-}, 5000);
-
-onBeforeUnmount(() => {
-  pause();
-});
+usePolling(refreshLogs, { interval: 5000 });
 </script>
 
 <template>

projects/app/src/pages/projects/[id]/[containerId]/stats.vue

@@ -15,9 +15,7 @@ const containerId = ref<string>(route.params.containerId ? (route.params.contain
 const { data, refresh } = await useAsyncGetContainerStatsQuery({ id: containerId.value }, null, true);
 const stats = computed(() => data?.value || null);
 
-useIntervalFn(() => {
-  refresh();
-}, 5000);
+usePolling(refresh, { interval: 5000 });
 </script>
 
 <template>