optimize network calls of flow status

frontend/src/lib/components/FlowJobResult.svelte

@@ -29,17 +29,22 @@
 
 	$: jobId != lastJobId && diffJobId()
 
+	let iteration = 0
+	let logOffset = 0
+
 	async function diffJobId() {
 		if (jobId != lastJobId) {
 			lastJobId = jobId
 			logs = undefined
 			logOffset = 0
+			iteration = 0
 			getLogs()
 		}
 	}
 
-	let logOffset = 0
 	async function getLogs() {
+		console.log('getLogs', iteration, jobId)
+		iteration += 1
 		if (jobId) {
 			const getUpdate = await JobService.getJobUpdates({
 				workspace: workspaceId ?? $workspaceStore!,
@@ -51,11 +56,14 @@
 			logOffset = getUpdate.log_offset ?? 0
 		}
 		if (refreshLog) {
-			setTimeout(() => {
-				if (refreshLog) {
-					getLogs()
-				}
-			}, 1000)
+			setTimeout(
+				() => {
+					if (refreshLog) {
+						getLogs()
+					}
+				},
+				iteration < 10 ? 1000 : iteration < 20 ? 2000 : 5000
+			)
 		}
 	}
 </script>

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -88,7 +88,7 @@
 		flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []
 
 	let retry_selected = ''
-	let timeout: NodeJS.Timeout
+	let timeout: NodeJS.Timeout | undefined = undefined
 
 	let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
 	let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
@@ -403,7 +403,7 @@
 		}
 	}
 
-	$: isForloopSelected && globalModuleStates && loadJobInProgress()
+	$: isForloopSelected && globalModuleStates && debounceLoadJobInProgress()
 
 	async function getNewJob(jobId: string, initialJob: Job | undefined) {
 		if (
@@ -421,10 +421,33 @@
 		}
 	}
 
+	let debounceJobId: string | undefined = undefined
+	let lastRefreshed: Date | undefined = undefined
+	function debounceLoadJobInProgress() {
+		const pollingRate = reducedPolling ? 5000 : 1000
+		if (
+			lastRefreshed &&
+			new Date().getTime() - lastRefreshed.getTime() < pollingRate &&
+			debounceJobId == jobId
+		) {
+			timeout && clearTimeout(timeout)
+		}
+		timeout = setTimeout(() => {
+			loadJobInProgress()
+			lastRefreshed = new Date()
+			debounceJobId = jobId
+			timeout = undefined
+		}, pollingRate)
+	}
+
 	let errorCount = 0
 	let notAnonynmous = false
+	let started = false
 	async function loadJobInProgress() {
-		dispatch('start')
+		if (!started) {
+			started = true
+			dispatch('start')
+		}
 		if (jobId != '00000000-0000-0000-0000-000000000000') {
 			try {
 				const newJob = await getNewJob(jobId, initialJob)
@@ -447,7 +470,7 @@
 			}
 		}
 		if (job?.type !== 'CompletedJob' && errorCount < 4 && !destroyed) {
-			timeout = setTimeout(() => loadJobInProgress(), reducedPolling ? 5000 : 1000)
+			debounceLoadJobInProgress()
 		} else {
 			dispatch('done', job)
 		}

frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte

@@ -388,19 +388,20 @@
 		</DrawerContent>
 	</Drawer>
 {/if}
-
-<TestJobLoader
-	lazyLogs
-	bind:scriptProgress
-	on:done={() => job?.['result'] != undefined && (viewTab = 'result')}
-	bind:this={testJobLoader}
-	bind:getLogs
-	bind:isLoading={testIsLoading}
-	bind:job
-	bind:jobUpdateLastFetch
-	workspaceOverride={$workspaceStore}
-	bind:notfound
-/>
+{#if job?.job_kind != 'flow' && job?.job_kind != 'flownode' && job?.job_kind != 'flowpreview'}
+	<TestJobLoader
+		lazyLogs
+		bind:scriptProgress
+		on:done={() => job?.['result'] != undefined && (viewTab = 'result')}
+		bind:this={testJobLoader}
+		bind:getLogs
+		bind:isLoading={testIsLoading}
+		bind:job
+		bind:jobUpdateLastFetch
+		workspaceOverride={$workspaceStore}
+		bind:notfound
+	/>
+{/if}
 
 <Portal name="persistent-run">
 	<PersistentScriptDrawer bind:this={persistentScriptDrawer} />