From 2230c729d50062dc1d4ec223afdc3a50a64ead86 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 5 Dec 2024 23:52:34 +0100
Subject: [PATCH] optimize for loop rendering with more than 500 iterations

---
 frontend/src/lib/components/FlowStatusViewerInner.svelte | 9 ++++++++-
 .../components/flows/content/FlowModuleEarlyStop.svelte  | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 9f816d42c7..35803d53e3 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -817,6 +817,8 @@
 
 		return rec(ids, undefined)
 	}
+
+	let subflowsSize = 500
 </script>
 
 {#if notAnonynmous}
@@ -946,7 +948,12 @@
 				</h3>
 				<div class="overflow-auto max-h-1/2">
 					{#each flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
-						{#if render}
+						{#if render && j + subflowsSize + 1 == (flowJobIds?.flowJobs.length ?? 0)}
+							<Button variant="border" color="light" on:click={() => (subflowsSize += 500)}
+								>Load 500 more...</Button
+							>
+						{/if}
+						{#if render && j + subflowsSize + 1 > (flowJobIds?.flowJobs.length ?? 0)}
 							<Button
 								variant={forloop_selected === loopJobId ? 'contained' : 'border'}
 								color={flowJobIds?.flowJobsSuccess?.[j] === false
diff --git a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
index 9226d915fc..3effbf3825 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
@@ -85,7 +85,7 @@
 			/>
 
 			<div
-				class="w-full border p-2 flex flex-col {flowModule.stop_after_if
+				class="w-full mt-1 border p-2 flex flex-col {flowModule.stop_after_if
 					? ''
 					: 'bg-surface-secondary'}"
 			>
@@ -179,7 +179,7 @@
 			/>
 
 			<div
-				class="w-full border p-2 flex flex-col {flowModule.stop_after_all_iters_if
+				class="w-full border mt-1 p-2 flex flex-col {flowModule.stop_after_all_iters_if
 					? ''
 					: 'bg-surface-secondary'}"
 			>