optimize for loop rendering with more than 500 iterations

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

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'}"
 			>