From 3e452576003f72de9c8a52cf7d6471eeef9d71fb Mon Sep 17 00:00:00 2001
From: Anbraten <6918444+anbraten@users.noreply.github.com>
Date: Wed, 3 Dec 2025 21:50:17 +0100
Subject: [PATCH] Extract interval into composition (#5818)

---
 web/src/compositions/useInterval.ts | 18 ++++++++++++++++++
 web/src/views/admin/AdminQueue.vue  | 17 +++--------------
 2 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 web/src/compositions/useInterval.ts

diff --git a/web/src/compositions/useInterval.ts b/web/src/compositions/useInterval.ts
new file mode 100644
index 000000000..1779f020d
--- /dev/null
+++ b/web/src/compositions/useInterval.ts
@@ -0,0 +1,18 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export function useInterval(fn: () => void | Promise<void>, ms: number): void {
+  const id = ref<number>();
+
+  onMounted(async () => {
+    await fn(); // run once immediately
+    id.value = window.setInterval(() => {
+      void fn();
+    }, ms);
+  });
+
+  onBeforeUnmount(() => {
+    if (id.value != null) {
+      window.clearInterval(id.value);
+    }
+  });
+}
diff --git a/web/src/views/admin/AdminQueue.vue b/web/src/views/admin/AdminQueue.vue
index b267d6f61..d8a8e181e 100644
--- a/web/src/views/admin/AdminQueue.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -96,7 +96,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import AdminQueueStats from '~/components/admin/settings/queue/AdminQueueStats.vue';
@@ -107,6 +107,7 @@ import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
+import { useInterval } from '~/compositions/useInterval';
 import useNotifications from '~/compositions/useNotifications';
 import { useWPTitle } from '~/compositions/useWPTitle';
 import type { QueueInfo } from '~/lib/api/types';
@@ -162,19 +163,7 @@ async function resumeQueue() {
   });
 }
 
-const reloadInterval = ref<number>();
-onMounted(async () => {
-  await loadQueueInfo();
-  reloadInterval.value = window.setInterval(async () => {
-    await loadQueueInfo();
-  }, 5000);
-});
-
-onBeforeUnmount(() => {
-  if (reloadInterval.value) {
-    window.clearInterval(reloadInterval.value);
-  }
-});
+useInterval(loadQueueInfo, 5 * 1000);
 
 useWPTitle(computed(() => [t('admin.settings.queue.queue'), t('admin.settings.settings')]));
 </script>