improve perceived performances

frontend/src/lib/components/LogViewer.svelte

@@ -3,6 +3,7 @@
 
 	export let content: string | undefined
 	export let isLoading: boolean
+	export let duration: number | undefined = undefined
 
 	let scroll = true
 	let div: HTMLElement | null = null
@@ -43,6 +44,9 @@
 				</div>
 			</div>
 		</div>
+		{#if duration}
+			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
+		{/if}
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
 			>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
 		>

frontend/src/lib/components/TestJobLoader.svelte

@@ -21,14 +21,15 @@
 	let intervalId: SetIntervalAsyncTimer<unknown[]> | undefined = undefined
 
 	let syncIteration: number = 0
-	let ITERATIONS_BEFORE_SLOW_REFRESH = 100
+	let ITERATIONS_BEFORE_SLOW_REFRESH = 10
+	let ITERATIONS_BEFORE_SUPER_SLOW_REFRESH = 100
 
 	export async function abstractRun(fn: () => Promise<string>) {
 		try {
 			intervalId && clearIntervalAsync(intervalId)
 
 			if (isLoading && job) {
-				JobService.cancelQueuedJob({
+				await JobService.cancelQueuedJob({
 					workspace: workspace!,
 					id: job.id,
 					requestBody: {}
@@ -91,11 +92,16 @@
 	}
 
 	export async function cancelJob() {
-		await JobService.cancelQueuedJob({
-			workspace: $workspaceStore ?? '',
-			id: job?.id ?? '',
-			requestBody: {}
-		})
+		try {
+			await JobService.cancelQueuedJob({
+				workspace: $workspaceStore ?? '',
+				id: job?.id ?? '',
+				requestBody: {}
+			})
+		} catch (err) {
+			console.error(err)
+		}
+		isLoading = false
 		console.log('cancelled')
 	}
 
@@ -108,7 +114,7 @@
 			isLoading = true
 			intervalId = setIntervalAsync(async () => {
 				await syncer(testId)
-			}, 500)
+			}, 50)
 		}
 	}
 
@@ -144,6 +150,7 @@
 			notfound = false
 		} catch (err) {
 			intervalId && clearIntervalAsync(intervalId)
+			isLoading = false
 			if (err.status === 404) {
 				notfound = true
 			}
@@ -154,6 +161,9 @@
 
 	async function syncer(id: string): Promise<void> {
 		if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
+			intervalId && clearIntervalAsync(intervalId)
+			intervalId = setIntervalAsync(async () => await syncer(id), 500)
+		} else if (syncIteration == ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
 			intervalId && clearIntervalAsync(intervalId)
 			intervalId = setIntervalAsync(async () => await syncer(id), 2000)
 		}

frontend/src/lib/components/scriptEditor/LogPanel.svelte

@@ -77,8 +77,12 @@
 		-->
 		{#if selectedTab === 'logs'}
 			<SplitPanesWrapper horizontal>
-				<Pane class="!duration-[0ms]">
-					<LogViewer content={previewJob?.logs} isLoading={previewIsLoading} />
+				<Pane class="!duration-[0ms] relative">
+					<LogViewer
+						duration={previewJob?.['duration_ms']}
+						content={previewJob?.logs}
+						isLoading={previewIsLoading}
+					/>
 				</Pane>
 				<Pane class="!duration-[0ms]">
 					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}