feat: add global polling indicator to track active data sync requests

Author: Pascal Klesse

projects/app/src/components/Header.vue

@@ -92,6 +92,7 @@ async function uploadTemplate(e: any) {
         </div>
       </div>
       <div class="flex flex-1 items-center justify-end gap-x-5">
+        <PollingIndicator />
         <div class="hidden lg:flex text-white/80">
           {{ version }}
         </div>

projects/app/src/components/PollingIndicator.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { usePollingState } from '~/states/polling';
+
+const { isPolling } = usePollingState();
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="isPolling" class="flex items-center" title="Syncing data...">
+      <span class="i-bi-arrow-repeat text-lg text-primary-500 animate-spin"></span>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -1,5 +1,7 @@
 import type { PollingOptions, PollingReturn } from '~/interfaces/polling.interface';
 
+import { usePollingState } from '~/states/polling';
+
 /**
  * Composable for sequential polling that waits for the previous request to complete
  * before starting the next interval timer.
@@ -26,6 +28,7 @@ export function usePolling(fn: () => Promise<unknown>, options: PollingOptions):
   // Variables
   // ============================================================================
   const { immediate = true, interval, maxConsecutiveErrors = 3, onError } = options;
+  const { decrement, increment } = usePollingState();
 
   const errorCount = ref<number>(0);
   const isActive = ref<boolean>(immediate);
@@ -58,6 +61,7 @@ export function usePolling(fn: () => Promise<unknown>, options: PollingOptions):
     }
 
     isPending.value = true;
+    increment();
 
     try {
       await fn();
@@ -76,6 +80,7 @@ export function usePolling(fn: () => Promise<unknown>, options: PollingOptions):
       }
     } finally {
       isPending.value = false;
+      decrement();
 
       if (isActive.value) {
         scheduleNext();

projects/app/src/states/polling.ts

@@ -0,0 +1,26 @@
+/**
+ * Global polling state to track active polling requests across the app
+ */
+const pollingState = () => useState<number>('polling_active_count', () => 0);
+
+export function usePollingState() {
+  const activeCount = pollingState();
+  const isPolling = computed<boolean>(() => activeCount.value > 0);
+
+  function increment(): void {
+    activeCount.value++;
+  }
+
+  function decrement(): void {
+    if (activeCount.value > 0) {
+      activeCount.value--;
+    }
+  }
+
+  return {
+    activeCount: readonly(activeCount),
+    decrement,
+    increment,
+    isPolling,
+  };
+}