improve input history job loader UX

backend/windmill-api/src/inputs.rs

@@ -134,14 +134,14 @@ async fn get_input_history(
     let mut tx = user_db.begin(&authed).await?;
 
     let args_query = if let Some(args) = &g.args {
-        sql_builder::bind::Bind::bind(&"args @> ?", &args.replace("'", "''"))
+        sql_builder::bind::Bind::bind(&"and args @> ?", &args.replace("'", "''"))
     } else {
         "".to_string()
     };
 
     let sql = &format!(
         "select id, v2_job.created_at, created_by, 'null'::jsonb as args, status = 'success' as success from v2_job JOIN v2_job_completed USING (id) \
-        where {} = $1 and kind = any($2) {args_query} and v2_job.workspace_id = $3 AND v2_job_completed.status != 'skipped' \
+        where v2_job.workspace_id = $3 and {} = $1 and kind = any($2) {args_query} AND v2_job_completed.status != 'skipped' \
         order by v2_job.created_at desc limit $4 offset $5",
         r.runnable_type.column_name(),
 

frontend/src/lib/components/HistoricInputs.svelte

@@ -57,8 +57,8 @@
 
 	let jobHovered: string | undefined = undefined
 
-	export function refresh() {
-		historicList?.refresh()
+	export function refresh(clearCurrentRuns: boolean = false) {
+		historicList?.refresh(clearCurrentRuns)
 	}
 
 	export function resetSelected(dispatchEvent?: boolean) {

frontend/src/lib/components/HistoricList.svelte

@@ -18,7 +18,10 @@
 	let viewerOpen = false
 	let openStates: Record<string, boolean> = {} // Track open state for each item
 
-	export function refresh() {
+	export function refresh(clearCurrentRuns: boolean = false) {
+		if (clearCurrentRuns) {
+			infiniteList?.reset()
+		}
 		if (infiniteList) {
 			infiniteList.loadData('refresh')
 		}

frontend/src/lib/components/InfiniteList.svelte

@@ -12,19 +12,35 @@
 	export let isEmpty: boolean = true
 	export let length: number = 0
 
+	const perPage = 20
+
 	let hasMore = false
 	let page = 1
-	let perPage = 10
 	let hasAlreadyFailed = false
 	let hovered: any | undefined = undefined
 	let initLoad = false
 	let loadInputs: ((page: number, perPage: number) => Promise<any[]>) | undefined = undefined
 	let deleteItemFn: ((id: any) => Promise<any>) | undefined = undefined
 
+	export function reset() {
+		items = undefined
+		loading = false
+		initLoad = false
+		length = 0
+		hasMore = false
+		page = 1
+	}
+
+	let loadingMore = false
+
 	export async function loadData(loadOption: 'refresh' | 'forceRefresh' | 'loadMore' = 'loadMore') {
 		// console.log('loadData', loadOption, length, items?.length)
 
 		if (!loadInputs) return
+		if (loadOption == 'loadMore') {
+			if (loadingMore || loading) return
+			loadingMore = true
+		}
 		loading = true
 		hasMore = length === perPage * page
 
@@ -76,6 +92,7 @@
 			dispatch('error', { type: 'load', error: err })
 		} finally {
 			loading = false
+			loadingMore = false
 		}
 	}
 
@@ -119,6 +136,7 @@
 				loadData()
 			}}
 			{loading}
+			{loadingMore}
 		>
 			<slot name="columns" />
 

frontend/src/lib/components/RunChart.svelte

@@ -181,8 +181,6 @@
 				if (date < min) {
 					min = date
 				}
-			} else {
-				console.log(job)
 			}
 		}
 		return min

frontend/src/lib/components/SavedInputsV2.svelte

@@ -144,7 +144,7 @@
 														searchArgs = {}
 														appliedSearchArgs = {}
 														await tick()
-														historicInputs?.refresh()
+														historicInputs?.refresh(true)
 													}}
 													variant="contained"
 													size="xs2"
@@ -155,7 +155,7 @@
 												on:click={async () => {
 													appliedSearchArgs = structuredClone(searchArgs)
 													await tick()
-													historicInputs?.refresh()
+													historicInputs?.refresh(true)
 												}}
 												endIcon={{ icon: Search }}
 												variant="contained"

frontend/src/lib/components/table/DataTable.svelte

@@ -7,7 +7,7 @@
 <script lang="ts">
 	import { createEventDispatcher, setContext } from 'svelte'
 	import Button from '../common/button/Button.svelte'
-	import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon } from 'lucide-svelte'
+	import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, Loader2 } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import List from '$lib/components/common/layout/List.svelte'
 
@@ -32,7 +32,7 @@
 	const dispatch = createEventDispatcher()
 	let tableContainer: HTMLDivElement
 	export let loading = false
-
+	export let loadingMore = false
 	setContext<DatatableContext>('datatable', {
 		size
 	})
@@ -140,5 +140,13 @@
 				</Button>
 			</div>
 		{/if}
+		{#if loading || loadingMore}
+			<div
+				class="text-tertiary bg-surface border-t flex flex-row justify-center py-2 items-center gap-2"
+			>
+				<Loader2 class="animate-spin" size={12} />
+				<span class="text-xs">{loadingMore ? 'Loading more...' : 'Refreshing...'}</span>
+			</div>
+		{/if}
 	</List>
 </div>