use async internval for loading logs for better handling of slow connections

frontend/package-lock.json

@@ -20,6 +20,7 @@
 				"monaco-editor": "^0.34.1",
 				"monaco-editor-workers": "^0.34.2",
 				"monaco-languageclient": "4.0.1",
+				"set-interval-async": "^3.0.2",
 				"svelte-autosize": "^1.0.1",
 				"svelte-chartjs": "^3.0.1",
 				"vscode-ws-jsonrpc": "^2.0.0"
@@ -5554,6 +5555,14 @@
 			"dev": true,
 			"optional": true
 		},
+		"node_modules/set-interval-async": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/set-interval-async/-/set-interval-async-3.0.2.tgz",
+			"integrity": "sha512-s8Jl35TVylbhgeYbTJ3y3h/KnBCGvDPHyuG02My82YNwgKRErpmvNsWWec5zpt4jqTKPZyRmgCEkeFb07+j7EA==",
+			"engines": {
+				"node": ">= 14.0.0"
+			}
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10748,6 +10757,11 @@
 				}
 			}
 		},
+		"set-interval-async": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/set-interval-async/-/set-interval-async-3.0.2.tgz",
+			"integrity": "sha512-s8Jl35TVylbhgeYbTJ3y3h/KnBCGvDPHyuG02My82YNwgKRErpmvNsWWec5zpt4jqTKPZyRmgCEkeFb07+j7EA=="
+		},
 		"shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

frontend/package.json

@@ -69,6 +69,7 @@
 		"monaco-editor": "^0.34.1",
 		"monaco-editor-workers": "^0.34.2",
 		"monaco-languageclient": "4.0.1",
+		"set-interval-async": "^3.0.2",
 		"svelte-autosize": "^1.0.1",
 		"svelte-chartjs": "^3.0.1",
 		"vscode-ws-jsonrpc": "^2.0.0"

frontend/src/lib/components/TestJobLoader.svelte

@@ -4,6 +4,11 @@
 	import { onDestroy } from 'svelte'
 	import type { Preview } from '$lib/gen/models/Preview'
 	import { createEventDispatcher } from 'svelte'
+	import {
+		setIntervalAsync,
+		clearIntervalAsync,
+		type SetIntervalAsyncTimer
+	} from 'set-interval-async'
 
 	export let isLoading = false
 	export let job: Job | undefined = undefined
@@ -13,14 +18,14 @@
 	const dispatch = createEventDispatcher()
 
 	$: workspace = workspaceOverride ?? $workspaceStore
-	let intervalId: NodeJS.Timer
+	let intervalId: SetIntervalAsyncTimer<unknown[]> | undefined = undefined
 
 	let syncIteration: number = 0
 	let ITERATIONS_BEFORE_SLOW_REFRESH = 100
 
 	export async function abstractRun(fn: () => Promise<string>) {
 		try {
-			intervalId && clearInterval(intervalId)
+			intervalId && clearIntervalAsync(intervalId)
 			if (isLoading && job) {
 				JobService.cancelQueuedJob({
 					workspace: workspace!,
@@ -93,15 +98,14 @@
 	}
 
 	export async function watchJob(testId: string) {
-		console.log('watch jobs')
-		intervalId && clearInterval(intervalId)
+		intervalId && clearIntervalAsync(intervalId)
 		job = undefined
 		syncIteration = 0
 		const isCompleted = await loadTestJob(testId)
 		if (!isCompleted) {
 			isLoading = true
-			intervalId = setInterval(() => {
-				syncer(testId)
+			intervalId = setIntervalAsync(async () => {
+				await syncer(testId)
 			}, 500)
 		}
 	}
@@ -129,7 +133,7 @@
 			if (job?.type === 'CompletedJob') {
 				//only CompletedJob has success property
 				isCompleted = true
-				intervalId && clearInterval(intervalId)
+				intervalId && clearIntervalAsync(intervalId)
 				if (isLoading) {
 					dispatch('done', job)
 					isLoading = false
@@ -137,7 +141,7 @@
 			}
 			notfound = false
 		} catch (err) {
-			intervalId && clearInterval(intervalId)
+			intervalId && clearIntervalAsync(intervalId)
 			if (err.status === 404) {
 				notfound = true
 			}
@@ -146,16 +150,16 @@
 		return isCompleted
 	}
 
-	function syncer(id: string): void {
+	async function syncer(id: string): Promise<void> {
 		if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
-			intervalId && clearInterval(intervalId)
-			intervalId = setInterval(() => syncer(id), 2000)
+			intervalId && clearIntervalAsync(intervalId)
+			intervalId = setIntervalAsync(async () => await syncer(id), 2000)
 		}
 		syncIteration++
-		loadTestJob(id)
+		await loadTestJob(id)
 	}
 
 	onDestroy(() => {
-		intervalId && clearInterval(intervalId)
+		intervalId && clearIntervalAsync(intervalId)
 	})
 </script>