From c2a92b69ef0b5acacbda38261e654fe7d7cf36f6 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 11 Aug 2023 15:44:24 +0200
Subject: [PATCH] fix(frontend): Fix lagging issues when resizing (#2027)

---
 frontend/src/lib/components/RunChart.svelte              | 4 +++-
 .../routes/(root)/(logged)/runs/[...path]/+page.svelte   | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index de20db1d1e..ca489448af 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -152,4 +152,6 @@
 	} as any
 </script>
 
-<Scatter {data} options={scatterOptions} />
+<div class="relative">
+	<Scatter {data} options={scatterOptions} />
+</div>
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index b9fd1ffffc..a54ed674ff 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -121,7 +121,9 @@
 	}
 
 	let sync = true
+	let mounted: boolean = false
 	onMount(() => {
+		mounted = true
 		loadPaths()
 		intervalId = setInterval(syncer, 5000)
 
@@ -140,10 +142,11 @@
 		}
 	})
 
-	$: if (!intervalId && autoRefresh) {
+	$: if (mounted && !intervalId && autoRefresh) {
 		intervalId = setInterval(syncer, 5000)
 	}
-	$: if (intervalId && !autoRefresh) {
+
+	$: if (mounted && intervalId && !autoRefresh) {
 		clearInterval(intervalId)
 		intervalId = undefined
 	}
@@ -315,7 +318,7 @@
 		</div>
 	</div>
 
-	<div class=" p-2">
+	<div class="p-2 w-full">
 		<RunChart
 			jobs={completedJobs}
 			on:zoom={async (e) => {