From f4c54db84e4e15649b93079573b8c2a238a4112b Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 23 Jun 2025 11:45:39 +0100
Subject: [PATCH] Add loading state

---
 .../src/lib/components/FlowBuilder.svelte     |  6 +++
 .../lib/components/FlowPreviewContent.svelte  |  2 +
 .../ModulePreviewResultViewer.svelte          | 10 +++--
 .../lib/components/flows/FlowEditor.svelte    |  5 ++-
 .../flows/content/FlowEditorPanel.svelte      |  5 ++-
 .../flows/content/FlowModuleComponent.svelte  | 43 +++++++++++++------
 .../flows/content/FlowModuleWrapper.svelte    |  5 ++-
 .../flows/header/FlowPreviewButtons.svelte    |  6 ++-
 8 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index cd09f9c4ee..0d59ba7b98 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -319,7 +319,11 @@
 		loadingDraft = false
 	}
 
+	let loadingJobs: 'wait' | 'loading' | 'done' = $state('wait')
 	onMount(() => {
+		setTimeout(() => {
+			loadingJobs = 'loading'
+		}, 2000)
 		setSavedraftCb?.(() => saveDraft())
 	})
 
@@ -987,6 +991,7 @@
 						}}
 						bind:this={flowPreviewButtons}
 						{loading}
+						bind:loadingJobs
 					/>
 					<Button
 						loading={loadingDraft}
@@ -1050,6 +1055,7 @@
 					}}
 					{forceTestTab}
 					{highlightArg}
+					{loadingJobs}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index ff7bc3591d..705eb84fc6 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -41,6 +41,7 @@
 
 	export let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
 	export let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
+	export let onJobsLoaded: (() => void) | undefined = undefined
 
 	let restartBranchNames: [number, string][] = []
 
@@ -552,6 +553,7 @@
 					on:jobsLoaded={() => {
 						if (initial) {
 							loadIndividualStepsStates()
+							onJobsLoaded?.()
 						}
 					}}
 					bind:selectedJobStep
diff --git a/frontend/src/lib/components/ModulePreviewResultViewer.svelte b/frontend/src/lib/components/ModulePreviewResultViewer.svelte
index ec203979c9..35b4df1ebb 100644
--- a/frontend/src/lib/components/ModulePreviewResultViewer.svelte
+++ b/frontend/src/lib/components/ModulePreviewResultViewer.svelte
@@ -24,6 +24,7 @@
 		disableMock?: boolean
 		disableHistory?: boolean
 		onUpdateMock?: (mock: { enabled: boolean; return_value?: unknown }) => void
+		loadingHistory?: boolean
 	}
 
 	let {
@@ -38,7 +39,8 @@
 		testIsLoading = false,
 		disableMock = false,
 		disableHistory = false,
-		onUpdateMock
+		onUpdateMock,
+		loadingHistory = false
 	}: Props = $props()
 
 	const { testSteps } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -82,7 +84,7 @@
 			mock={mod.mock}
 			bind:forceJson
 			bind:selectedJob
-			isLoading={(testIsLoading && !scriptProgress) || fetchingLastJob}
+			isLoading={(testIsLoading && !scriptProgress) || fetchingLastJob || loadingHistory}
 			bind:preview
 			path={`path` in mod.value ? mod.value.path : ''}
 			{loopStatus}
@@ -112,7 +114,9 @@
 				duration={selectedJob?.['duration_ms']}
 				mem={selectedJob?.['mem_peak']}
 				content={selectedJob?.logs}
-				isLoading={(testIsLoading && selectedJob?.['running'] == false) || fetchingLastJob}
+				isLoading={(testIsLoading && selectedJob?.['running'] == false) ||
+					fetchingLastJob ||
+					loadingHistory}
 				tag={selectedJob?.tag}
 			/>
 		{/if}
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index d9bce7c83d..b7f5a9fb29 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -36,6 +36,7 @@
 		onEditInput?: ((moduleId: string, key: string) => void) | undefined
 		forceTestTab?: Record<string, boolean>
 		highlightArg?: Record<string, string | undefined>
+		loadingJobs?: 'wait' | 'loading' | 'done'
 	}
 
 	let {
@@ -52,7 +53,8 @@
 		onTestUpTo = undefined,
 		onEditInput = undefined,
 		forceTestTab,
-		highlightArg
+		highlightArg,
+		loadingJobs
 	}: Props = $props()
 
 	let flowModuleSchemaMap: FlowModuleSchemaMap | undefined = $state()
@@ -125,6 +127,7 @@
 					{onDeployTrigger}
 					{forceTestTab}
 					{highlightArg}
+					{loadingJobs}
 				/>
 			{/if}
 		</Pane>
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 41b3d15827..9ba99e1a7b 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -27,6 +27,7 @@
 		onDeployTrigger?: (trigger: Trigger) => void
 		forceTestTab?: Record<string, boolean>
 		highlightArg?: Record<string, string | undefined>
+		loadingJobs?: 'wait' | 'loading' | 'done'
 	}
 
 	let {
@@ -37,7 +38,8 @@
 		savedFlow = undefined,
 		onDeployTrigger = () => {},
 		forceTestTab,
-		highlightArg
+		highlightArg,
+		loadingJobs
 	}: Props = $props()
 
 	const {
@@ -144,6 +146,7 @@
 					savedModule={savedFlow?.value.modules[index]}
 					{forceTestTab}
 					{highlightArg}
+					{loadingJobs}
 				/>
 			{/each}
 		{/key}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 984e8d7d73..86d427b275 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -79,6 +79,7 @@
 		savedModule?: FlowModule | undefined
 		forceTestTab?: boolean
 		highlightArg?: string
+		loadingJobs?: 'wait' | 'loading' | 'done'
 	}
 
 	let {
@@ -93,7 +94,8 @@
 		enableAi,
 		savedModule = undefined,
 		forceTestTab = false,
-		highlightArg = undefined
+		highlightArg = undefined,
+		loadingJobs
 	}: Props = $props()
 
 	let tag: string | undefined = $state(undefined)
@@ -821,20 +823,32 @@
 								{#if selected === 'test'}
 									<Pane minSize={20} class="relative">
 										{#if $flowStateStore[flowModule.id]?.initial}
-											<!-- svelte-ignore a11y_no_static_element_interactions -->
-											<!-- svelte-ignore a11y_click_events_have_key_events -->
-											<div
-												onclick={() => {
-													$flowStateStore[flowModule.id]!.initial = false
-												}}
-												class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
-											>
-												<div class="text-center text-primary text-sm py-2 pt-20"
-													><span class="font-bold border p-2 bg-surface-secondary rounded-md"
-														>Run loaded from history</span
-													></div
+											{#if loadingJobs && loadingJobs !== 'done'}
+												<div
+													class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
 												>
-											</div>
+													<div class="text-center text-primary text-sm py-2 pt-20">
+														<span class="font-bold border p-2 bg-surface-secondary rounded-md">
+															Loading history...
+														</span>
+													</div>
+												</div>
+											{:else}
+												<!-- svelte-ignore a11y_no_static_element_interactions -->
+												<!-- svelte-ignore a11y_click_events_have_key_events -->
+												<div
+													onclick={() => {
+														$flowStateStore[flowModule.id]!.initial = false
+													}}
+													class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
+												>
+													<div class="text-center text-primary text-sm py-2 pt-20"
+														><span class="font-bold border p-2 bg-surface-secondary rounded-md"
+															>Run loaded from history</span
+														></div
+													>
+												</div>
+											{/if}
 										{/if}
 										<ModulePreviewResultViewer
 											lang={flowModule.value['language'] ?? 'deno'}
@@ -855,6 +869,7 @@
 											{testIsLoading}
 											disableMock={preprocessorModule || failureModule}
 											disableHistory={failureModule}
+											loadingHistory={loadingJobs !== undefined && loadingJobs !== 'done'}
 										/>
 									</Pane>
 								{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
index a61d1dbdb9..8984c00b7f 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -42,6 +42,7 @@
 		previousModule?: FlowModule | undefined
 		forceTestTab?: Record<string, boolean>
 		highlightArg?: Record<string, string | undefined>
+		loadingJobs?: 'wait' | 'loading' | 'done'
 	}
 
 	let {
@@ -52,7 +53,8 @@
 		parentModule = $bindable(),
 		previousModule = undefined,
 		forceTestTab,
-		highlightArg
+		highlightArg,
+		loadingJobs
 	}: Props = $props()
 
 	function initializePrimaryScheduleForTriggerScript(module: FlowModule) {
@@ -202,6 +204,7 @@
 			{savedModule}
 			forceTestTab={forceTestTab?.[flowModule.id]}
 			highlightArg={highlightArg?.[flowModule.id]}
+			{loadingJobs}
 		/>
 	{/if}
 {:else if flowModule.value.type === 'forloopflow' || flowModule.value.type == 'whileloopflow'}
diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
index c3e80d836f..55e5402dff 100644
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -27,6 +27,7 @@
 		}
 		flowPreviewContent?.test()
 	}
+	export let loadingJobs: 'wait' | 'loading' | 'done' = 'wait'
 
 	const dispatch = createEventDispatcher()
 
@@ -111,7 +112,7 @@
 </Button>
 
 {#if !loading}
-	<Drawer bind:open={previewOpen} size="75%" {preventEscape}>
+	<Drawer bind:open={previewOpen} size="75%" {preventEscape} alwaysOpen={loadingJobs === 'loading'}>
 		<FlowPreviewContent
 			bind:this={flowPreviewContent}
 			bind:localModuleStates
@@ -127,6 +128,9 @@
 			bind:selectedJobStepType
 			bind:branchOrIterationN
 			bind:rightColumnSelect
+			onJobsLoaded={() => {
+				loadingJobs = 'done'
+			}}
 			on:close={() => {
 				previewOpen = false
 			}}