From c227ba2794db55ae3bfb44bd25b266ad80a1140f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 25 Jan 2023 20:33:33 +0100
Subject: [PATCH] loader for flowjobresult

---
 .../src/lib/components/FlowJobResult.svelte   | 10 ++++++++-
 .../lib/components/FlowStatusViewer.svelte    | 22 ++++++++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/FlowJobResult.svelte b/frontend/src/lib/components/FlowJobResult.svelte
index 448757e2ce..2188f8dd04 100644
--- a/frontend/src/lib/components/FlowJobResult.svelte
+++ b/frontend/src/lib/components/FlowJobResult.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
 	import DisplayResult from './DisplayResult.svelte'
 	import LogViewer from './LogViewer.svelte'
 
@@ -6,6 +7,7 @@
 	export let logs: string
 	export let col: boolean = false
 	export let noBorder = false
+	export let loading
 </script>
 
 <div
@@ -14,7 +16,13 @@
 >
 	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
-		<DisplayResult {result} />
+		{#if result}
+			<DisplayResult {result} />
+		{:else if loading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="text-gray-400">No result (result is undefined)</div>
+		{/if}
 	</div>
 	<div class="overflow-auto max-h-80 h-full relative">
 		<LogViewer content={logs ?? ''} isLoading={false} />
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index eaa80ebab5..c25c83085f 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -180,7 +180,11 @@
 				<FlowPreviewStatus {job} />
 				{#if `result` in job}
 					<div class="w-full h-full">
-						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
+						<FlowJobResult
+							loading={job['running'] == true}
+							result={job.result}
+							logs={job.logs ?? ''}
+						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
 					<div class="w-full h-full mt-2 text-sm text-gray-600">
@@ -451,7 +455,13 @@
 					{#if selectedNode}
 						{@const node = localFlowModuleStates[selectedNode]}
 						{#if selectedNode == 'end'}
-							<FlowJobResult noBorder col result={job['result'] ?? {}} logs={job.logs ?? ''} />
+							<FlowJobResult
+								loading={job['running']}
+								noBorder
+								col
+								result={job['result']}
+								logs={job.logs ?? ''}
+							/>
 						{:else if selectedNode == 'start'}
 							{#if job.args}
 								<div class="p-2">
@@ -478,7 +488,13 @@
 									</div>
 								{/if}
 							</div>
-							<FlowJobResult noBorder col result={node.result ?? {}} logs={node.logs ?? ''} />
+							<FlowJobResult
+								loading={job['running'] == true}
+								noBorder
+								col
+								result={node.result}
+								logs={node.logs ?? ''}
+							/>
 						{:else}
 							<p class="p-2 text-gray-600 italic"
 								>The execution of this node has no information attached to it. The job likely did