From 2da10e62a4273fda16e9cf40bf894211e0ae7ec5 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 10 Apr 2025 13:29:28 +0200
Subject: [PATCH] fix janky loader in trigger captures table (#5596)

---
 .../src/lib/components/InfiniteList.svelte    |  4 ++-
 .../src/lib/components/table/DataTable.svelte |  3 +-
 .../components/triggers/CaptureSection.svelte |  1 +
 .../components/triggers/CaptureTable.svelte   | 31 +++++++++++--------
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/InfiniteList.svelte b/frontend/src/lib/components/InfiniteList.svelte
index 58863e98ca..4777efaf06 100644
--- a/frontend/src/lib/components/InfiniteList.svelte
+++ b/frontend/src/lib/components/InfiniteList.svelte
@@ -18,6 +18,7 @@
 		bgHover: '',
 		class: ''
 	}
+	export let neverShowLoader = false
 
 	const perPage = 20
 
@@ -142,6 +143,7 @@
 	{loadingMore}
 	{rounded}
 	{noBorder}
+	{neverShowLoader}
 >
 	<slot name="columns" />
 
@@ -174,7 +176,7 @@
 	</tbody>
 
 	<svelte:fragment slot="emptyMessage">
-		{#if (!items || items?.length === 0) && !loading}
+		{#if (!items || items?.length === 0) && (!loading || neverShowLoader)}
 			<slot name="empty" {items} />
 		{/if}
 	</svelte:fragment>
diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 2b3be6c6a5..298c0906ea 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -26,6 +26,7 @@
 	export let contentHeight: number = 0
 	export let tableFixed: boolean = false
 	export let infiniteScroll: boolean | undefined = undefined
+	export let neverShowLoader = false
 
 	let footerHeight: number = 0
 	let tableHeight: number = 0
@@ -141,7 +142,7 @@
 				</Button>
 			</div>
 		{/if}
-		{#if loading || loadingMore}
+		{#if (loading || loadingMore) && !neverShowLoader}
 			<div
 				class="text-tertiary bg-surface border-t flex flex-row justify-center py-2 items-center gap-2"
 			>
diff --git a/frontend/src/lib/components/triggers/CaptureSection.svelte b/frontend/src/lib/components/triggers/CaptureSection.svelte
index ad483181e9..4331586190 100644
--- a/frontend/src/lib/components/triggers/CaptureSection.svelte
+++ b/frontend/src/lib/components/triggers/CaptureSection.svelte
@@ -128,6 +128,7 @@
 			on:addPreprocessor
 			on:testWithArgs
 			fullHeight={false}
+			captureActiveIndicator={captureInfo.active}
 		/>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 1865ec4fbd..2705f910d9 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Label from '../Label.svelte'
-	import { DatabaseIcon, Info, Trash2 } from 'lucide-svelte'
+	import { DatabaseIcon, Info, Loader2, Trash2 } from 'lucide-svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import Button from '../common/button/Button.svelte'
@@ -29,6 +29,7 @@
 	export let canEdit = false
 	export let fullHeight = true
 	export let limitPayloadSize = false
+	export let captureActiveIndicator: boolean | undefined = undefined
 
 	let selected: number | undefined = undefined
 	let testKind: 'preprocessor' | 'main' = 'main'
@@ -98,13 +99,13 @@
 							? {
 									payload: capture.payload,
 									...trigger_extra
-							  }
+								}
 							: typeof capture.payload === 'object'
-							? {
-									...capture.payload,
-									...trigger_extra
-							  }
-							: trigger_extra
+								? {
+										...capture.payload,
+										...trigger_extra
+									}
+								: trigger_extra
 						: capture.payload
 
 				return newCapture
@@ -141,7 +142,7 @@
 					? {
 							...(typeof fullCapture.payload === 'object' ? fullCapture.payload : {}),
 							...(typeof fullCapture.trigger_extra === 'object' ? fullCapture.trigger_extra : {})
-					  }
+						}
 					: fullCapture.payload
 		} else {
 			payloadData = structuredClone(capture.payloadData)
@@ -204,6 +205,9 @@
 				<CaptureButton small={true} on:openTriggers />
 			</div>
 		{/if}
+		{#if captureActiveIndicator}
+			<Loader2 class="animate-spin" size={16} />
+		{/if}
 	</svelte:fragment>
 	<svelte:fragment slot="action">
 		{#if canHavePreprocessor && !isEmpty}
@@ -235,8 +239,8 @@
 				? 'h-full'
 				: 'min-h-0 grow'
 			: capturesLength > 7
-			? 'h-[300px]'
-			: 'h-fit'}
+				? 'h-[300px]'
+				: 'h-fit'}
 	>
 		<InfiniteList
 			bind:this={infiniteList}
@@ -245,6 +249,7 @@
 			on:error={(e) => handleError(e.detail)}
 			on:select={(e) => handleSelect(e.detail)}
 			bind:length={capturesLength}
+			neverShowLoader={captureActiveIndicator !== undefined}
 		>
 			<svelte:fragment slot="columns">
 				<colgroup>
@@ -336,8 +341,8 @@
 										title={isFlow && testKind === 'main'
 											? 'Test flow with args'
 											: testKind === 'preprocessor'
-											? 'Apply args to preprocessor'
-											: 'Apply args to inputs'}
+												? 'Apply args to preprocessor'
+												: 'Apply args to inputs'}
 										startIcon={isFlow && testKind === 'main' ? { icon: Play } : {}}
 									>
 										{isFlow && testKind === 'main' ? 'Test' : 'Apply args'}
@@ -361,7 +366,7 @@
 				</SchemaPickerRow>
 			</svelte:fragment>
 			<svelte:fragment slot="empty">
-				<div class="text-center text-xs text-tertiary">No captures yet</div>
+				<div class="text-center text-xs text-tertiary my-2">No captures yet</div>
 			</svelte:fragment>
 		</InfiniteList>
 	</div>