From af2eac52a806d7ed470dea0e7adab5ca7322c97f Mon Sep 17 00:00:00 2001
From: Krisjanis Lejejs <krisjanis.lejejs@gmail.com>
Date: Mon, 9 Jan 2023 22:35:37 +0200
Subject: [PATCH] chore(web) Add loading indicators to jobs panel (#1272)

---
 .../components/admin-page/jobs/job-tile.svelte  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
index dda9e0149a..e23e33a525 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@@ -8,6 +8,7 @@
 	export let jobStatus: boolean;
 	export let waitingJobCount: number;
 	export let activeJobCount: number;
+
 	const dispatch = createEventDispatcher();
 </script>
 
@@ -36,8 +37,20 @@
 			>
 				<tr class="text-center flex place-items-center w-full h-[60px]">
 					<td class="text-sm px-2 w-1/3 text-ellipsis">{jobStatus ? 'Active' : 'Idle'}</td>
-					<td class="text-sm px-2 w-1/3 text-ellipsis">{activeJobCount}</td>
-					<td class="text-sm px-2 w-1/3 text-ellipsis">{waitingJobCount}</td>
+					<td class="flex justify-center text-sm px-2 w-1/3 text-ellipsis">
+						{#if activeJobCount !== undefined}
+							{activeJobCount}
+						{:else}
+							<LoadingSpinner />
+						{/if}
+					</td>
+					<td class="flex justify-center text-sm px-2 w-1/3 text-ellipsis">
+						{#if waitingJobCount !== undefined}
+							{waitingJobCount}
+						{:else}
+							<LoadingSpinner />
+						{/if}
+					</td>
 				</tr>
 			</tbody>
 		</table>