From 5c1f6207133de9df1fecdf7527c3190432c7ff9c Mon Sep 17 00:00:00 2001
From: Lyon <88232613+pikasTech@users.noreply.github.com>
Date: Tue, 23 Jun 2026 03:20:37 +0800
Subject: [PATCH] fix(workbench): delay live refresh on first load (#1943)

---
 .../src/composables/useAutoRefresh.ts         | 28 ++++++++++++++++---
 .../src/views/workbench/CodeWorkbenchView.vue |  2 +-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/web/hwlab-cloud-web/src/composables/useAutoRefresh.ts b/web/hwlab-cloud-web/src/composables/useAutoRefresh.ts
index 710ee3b9..1f231fcd 100644
--- a/web/hwlab-cloud-web/src/composables/useAutoRefresh.ts
+++ b/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 };
diff --git a/web/hwlab-cloud-web/src/views/workbench/CodeWorkbenchView.vue b/web/hwlab-cloud-web/src/views/workbench/CodeWorkbenchView.vue
index f6a2e9eb..54f7ba0f 100644
--- a/web/hwlab-cloud-web/src/views/workbench/CodeWorkbenchView.vue
+++ b/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;