From a7c4c5d0a84c9953efec3d2ed7dd33569f7082a3 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 8 Apr 2023 14:08:56 +0200
Subject: [PATCH] use skeleton for workers page

---
 .../(root)/(logged)/workers/+page.svelte      | 83 ++++++++++---------
 1 file changed, 46 insertions(+), 37 deletions(-)

diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index ff4249f675..9df11fa586 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Skeleton } from '$lib/components/common'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
@@ -7,12 +8,12 @@
 	import { displayDate, groupBy, sendUserToast } from '$lib/utils'
 	import { onDestroy, onMount } from 'svelte'
 
-	let workers: WorkerPing[] = []
+	let workers: WorkerPing[] | undefined = undefined
 	let filteredWorkers: WorkerPing[] = []
 	let groupedWorkers: [string, WorkerPing[]][] = []
 	let intervalId: NodeJS.Timer | undefined
 
-	$: filteredWorkers = workers.filter((x) => (x.last_ping ?? 0) < 300)
+	$: filteredWorkers = (workers ?? []).filter((x) => (x.last_ping ?? 0) < 300)
 	$: groupedWorkers = groupBy(filteredWorkers, (wp: WorkerPing) => wp.worker_instance)
 
 	let timeSinceLastPing = 0
@@ -52,40 +53,48 @@
 		 This page enables you to know their IP in case you need whitelisting and also display liveness information"
 	/>
 
-	{#if groupedWorkers.length == 0}
-		<p>No workers seems to be available</p>
-	{/if}
-	{#each groupedWorkers as [section, workers]}
-		<div class="mt-6">
-			Instance: {section} | IP:
-			<Badge large color="gray">{workers[0].ip}</Badge>
-		</div>
+	{#if workers != undefined}
+		{#if groupedWorkers.length == 0}
+			<p>No workers seems to be available</p>
+		{/if}
+		{#each groupedWorkers as [section, workers]}
+			<div class="mt-6">
+				Instance: {section} | IP:
+				<Badge large color="gray">{workers[0].ip}</Badge>
+			</div>
 
-		<TableCustom>
-			<tr slot="header-row">
-				<th>Worker</th>
-				<th>Last ping</th>
-				<th>Worker start</th>
-				<th>Nb of jobs executed</th>
-				<th>Liveness</th>
-			</tr>
-			<tbody slot="body">
-				{#if workers}
-					{#each workers as { worker, last_ping, started_at, jobs_executed }}
-						<tr>
-							<td class="py-1">{worker}</td>
-							<td class="py-1"
-								>{last_ping != undefined ? last_ping + timeSinceLastPing : -1}s ago</td
-							>
-							<td class="py-1">{displayDate(started_at)}</td>
-							<td class="py-1">{jobs_executed}</td>
-							<td class="py-1"
-								>{last_ping != undefined ? (last_ping < 60 ? 'Alive' : 'Dead') : 'Unknown'}</td
-							>
-						</tr>
-					{/each}
-				{/if}
-			</tbody>
-		</TableCustom>
-	{/each}
+			<TableCustom>
+				<tr slot="header-row">
+					<th>Worker</th>
+					<th>Last ping</th>
+					<th>Worker start</th>
+					<th>Nb of jobs executed</th>
+					<th>Liveness</th>
+				</tr>
+				<tbody slot="body">
+					{#if workers}
+						{#each workers as { worker, last_ping, started_at, jobs_executed }}
+							<tr>
+								<td class="py-1">{worker}</td>
+								<td class="py-1"
+									>{last_ping != undefined ? last_ping + timeSinceLastPing : -1}s ago</td
+								>
+								<td class="py-1">{displayDate(started_at)}</td>
+								<td class="py-1">{jobs_executed}</td>
+								<td class="py-1"
+									>{last_ping != undefined ? (last_ping < 60 ? 'Alive' : 'Dead') : 'Unknown'}</td
+								>
+							</tr>
+						{/each}
+					{/if}
+				</tbody>
+			</TableCustom>
+		{/each}
+	{:else}
+		<div class="flex flex-col">
+			{#each new Array(4) as _}
+				<Skeleton layout={[[8], 1]} />
+			{/each}
+		</div>
+	{/if}
 </CenteredPage>