From be0c8ddae087fab89bc5c7aa70ff1367fa3c7077 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Wed, 18 Jun 2025 14:25:55 +0200
Subject: [PATCH] prevent datatable from spamming loadMore on scroll to end
 (#5973)

---
 .../src/lib/components/table/DataTable.svelte   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 82b2f3f401..2fed249679 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -73,7 +73,7 @@
 
 		const hasScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight
 		if (!hasScrollbar && hasMore) {
-			dispatch('loadMore')
+			triggerLoadMore()
 		}
 	}
 
@@ -92,11 +92,20 @@
 
 		if (!tableContainer) return
 		const { scrollTop, scrollHeight, clientHeight } = tableContainer
-		if (scrollHeight - (scrollTop + clientHeight) < 50) {
-			dispatch('loadMore')
+		if (scrollHeight - (scrollTop + clientHeight) === 0) {
+			triggerLoadMore()
 		}
 	}
 
+	let lastLoadMoreDispatch: number | undefined = $state(undefined)
+	function triggerLoadMore() {
+		if (lastLoadMoreDispatch && Date.now() - lastLoadMoreDispatch < 1000) {
+			return
+		}
+		dispatch('loadMore')
+		lastLoadMoreDispatch = Date.now()
+	}
+
 	$effect(() => {
 		if (tableContainer && hasMore && !loading) {
 			untrack(() => checkScrollStatus())
@@ -170,7 +179,7 @@
 				<Button
 					color="light"
 					size="xs2"
-					on:click={() => dispatch('loadMore')}
+					on:click={() => triggerLoadMore()}
 					endIcon={{ icon: ArrowDownIcon }}
 				>
 					Load {loadMore} more