fix(frontend): Queued-running jobs preview (#1414)

* fix(frontend): Run preview queued jobs

* styling

* wording

frontend/src/lib/components/jobs/JobPreview.svelte

@@ -15,8 +15,8 @@
 	const POPUP_HEIGHT = 240 as const
 
 	export let job: Job | undefined
+	let hovered = false
 	let timeout: NodeJS.Timeout | undefined
-	let loadDelay: NodeJS.Timeout | undefined
 	let watchJob: (id: string) => Promise<void>
 	let args = job?.args
 	let result: any
@@ -26,34 +26,25 @@
 
 	$: open = $openStore === job?.id
 	$: completed = job?.type === Job.type.COMPLETED_JOB
+	$: running = job && `running` in job ? job.running : false
 	$: scheduled = job?.type === Job.type.QUEUED_JOB
 	$: logs = job?.logs || logs
 
 	async function instantOpen() {
+		hovered = true
 		if (!job) {
 			return
 		}
 		popupOnTop = wrapper.getBoundingClientRect().top > POPUP_HEIGHT
 		openStore.set(job.id)
 		if (!loaded) {
-			if (scheduled && 'scheduled_for' in job && job.scheduled_for) {
-				if (loadDelay) {
-					return
-				}
-				const time = new Date(job.scheduled_for).getTime() - Date.now()
-				loadDelay = setTimeout(async () => {
-					await tick()
-					job && watchJob && watchJob(job.id)
-					loadDelay = undefined
-				}, time)
-			} else {
-				await tick()
-				watchJob && watchJob(job.id)
-			}
+			await tick()
+			watchJob && watchJob(job.id)
 		}
 	}
 
 	function staggeredOpen() {
+		hovered = true
 		timeout = setTimeout(
 			async () => {
 				timeout = undefined
@@ -64,6 +55,7 @@
 	}
 
 	function close() {
+		hovered = false
 		if (timeout) {
 			clearTimeout(timeout)
 			timeout = undefined
@@ -81,12 +73,13 @@
 
 	onDestroy(() => {
 		timeout && clearTimeout(timeout)
-		loadDelay && clearTimeout(loadDelay)
 	})
 </script>
 
 <svelte:window on:keydown={({ key }) => ['Escape', 'Esc'].includes(key) && close()} />
-<TestJobLoader bind:job bind:watchJob on:done={onDone} />
+{#if hovered}
+	<TestJobLoader bind:job bind:watchJob on:done={onDone} />
+{/if}
 
 <div
 	on:mouseenter={staggeredOpen}
@@ -108,16 +101,21 @@
 				<JobArgs {args} tableClass="!pt-0 !min-w-0 !block" />
 			</div>
 			<div class="w-1/2 h-full overflow-auto p-2">
-				{#if completed}
-					<DisplayResult {result} disableExpand />
-				{:else if scheduled}
+				{#if scheduled}
 					<div class="text-sm font-semibold text-gray-600 mb-1">
-						<div>Job is scheduled for</div>
+						<div>{running ? 'Next job' : 'Job'} is scheduled for</div>
 						<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
 					</div>
-				{:else}
+				{/if}
+				{#if completed}
+					<DisplayResult {result} disableExpand />
+				{:else if running}
 					<div class="text-sm font-semibold text-gray-600 mb-1"> Job is still running </div>
-					<LogViewer content={logs} isLoading wrapperClass="!h-[calc(100%-24px)]" />
+					<LogViewer
+						content={logs}
+						isLoading
+						wrapperClass={scheduled ? '!h-[calc(100%-68px)]' : '!h-[calc(100%-24px)]'}
+					/>
 				{/if}
 			</div>
 		</div>