fix(workbench): delay live refresh on first load (#1943)

web/hwlab-cloud-web/src/composables/useAutoRefresh.ts

@@ -1,8 +1,14 @@
 import { onBeforeUnmount, onMounted, ref, type Ref } from "vue";
 
-export function useAutoRefresh(callback: () => Promise<void> | void, intervalMs = 30_000): { active: Ref<boolean>; refreshNow: () => Promise<void> } {
+export interface AutoRefreshOptions {
+  immediate?: boolean;
+  initialDelayMs?: number;
+}
+
+export function useAutoRefresh(callback: () => Promise<void> | void, intervalMs = 30_000, options: AutoRefreshOptions = {}): { active: Ref<boolean>; refreshNow: () => Promise<void> } {
   const active = ref(false);
-  let timer: ReturnType<typeof setInterval> | null = null;
+  let intervalTimer: ReturnType<typeof setInterval> | null = null;
+  let initialTimer: ReturnType<typeof setTimeout> | null = null;
 
   async function refreshNow(): Promise<void> {
     await callback();
@@ -10,13 +16,27 @@ export function useAutoRefresh(callback: () => Promise<void> | void, intervalMs
 
   onMounted(() => {
     active.value = true;
+    const startInterval = (): void => {
+      if (intervalTimer !== null) return;
+      intervalTimer = setInterval(() => void refreshNow(), intervalMs);
+    };
+    if (options.immediate === false) {
+      const delay = Math.max(0, Math.trunc(Number(options.initialDelayMs ?? intervalMs)));
+      initialTimer = setTimeout(() => {
+        initialTimer = null;
+        void refreshNow();
+        startInterval();
+      }, delay);
+      return;
+    }
     void refreshNow();
-    timer = setInterval(() => void refreshNow(), intervalMs);
+    startInterval();
   });
 
   onBeforeUnmount(() => {
     active.value = false;
-    if (timer) clearInterval(timer);
+    if (initialTimer) clearTimeout(initialTimer);
+    if (intervalTimer) clearInterval(intervalTimer);
   });
 
   return { active, refreshNow };

web/hwlab-cloud-web/src/views/workbench/CodeWorkbenchView.vue

@@ -42,7 +42,7 @@ onBeforeUnmount(() => {
 });
 watch(() => route.params.sessionId, () => void applyRouteSession());
 watch(() => workbench.activeSessionId, (sessionId) => void reflectActiveSessionInUrl(sessionId));
-useAutoRefresh(() => workbench.refreshLive(), 30_000);
+useAutoRefresh(() => workbench.refreshLive(), 30_000, { immediate: false, initialDelayMs: 10_000 });
 
 async function applyRouteSession(): Promise<boolean> {
   const sessionId = routeRequestId.value;