Loading spinner + fix per page bug in audit logs

Author: diegoimbert

frontend/package-lock.json

@@ -89,7 +89,7 @@
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@scalar/openapi-parser": "^0.15.0",
 		"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
-		"@tutorlatin/svelte-tiny-virtual-list": "^3.0.2",
+		"@tutorlatin/svelte-tiny-virtual-list": "^3.0.16",
 		"@windmill-labs/svelte-dnd-action": "^0.9.44",
 		"@xterm/addon-fit": "^0.10.0",
 		"@xyflow/svelte": "^1.0.0",

frontend/package.json

@@ -43,7 +43,6 @@
 
 	let usernames: string[] | undefined = $state()
 	let resources = usePromise(() => loadResources($workspaceStore!), { loadInit: false })
-	let loading: boolean = $state(false)
 	let page: number | undefined = undefined
 
 	interface Props {
@@ -58,6 +57,7 @@
 		resource?: string | undefined
 		actionKind?: ActionKind | 'all'
 		scope?: undefined | 'all_workspaces' | 'instance'
+		loading?: boolean
 	}
 
 	let {
@@ -71,7 +71,8 @@
 		operation = $bindable(),
 		resource = $bindable() as string | undefined,
 		actionKind = $bindable(undefined),
-		scope = $bindable(undefined)
+		scope = $bindable(undefined),
+		loading = $bindable(false)
 	}: Props = $props()
 
 	$effect.pre(() => {

frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte

@@ -4,7 +4,7 @@
 	import { displayDate } from '$lib/utils'
 	import { onMount, tick } from 'svelte'
 	import Button from '../common/button/Button.svelte'
-	import { ChevronLeft, ChevronRight, ListFilterPlus } from 'lucide-svelte'
+	import { ChevronLeft, ChevronRight, ListFilterPlus, Loader2 } from 'lucide-svelte'
 	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
 	import { twMerge } from 'tailwind-merge'
 
@@ -19,6 +19,7 @@
 		usernameFilter?: string | undefined
 		resourceFilter?: string | undefined
 		showWorkspace?: boolean
+		loading?: boolean
 		onselect?: (id: number) => void
 	}
 
@@ -33,7 +34,8 @@
 		usernameFilter = $bindable(),
 		resourceFilter = $bindable(),
 		showWorkspace = false,
-		onselect
+		onselect,
+		loading
 	}: Props = $props()
 
 	function groupLogsByDay(logs: AuditLog[]): Record<string, AuditLog[]> {
@@ -120,6 +122,7 @@
 		}
 		return 'gray'
 	}
+	let height = $derived(tableHeight - headerHeight - footerHeight)
 </script>
 
 <svelte:window onresize={() => computeHeight()} />
@@ -141,10 +144,14 @@
 	</div>
 	{#if logs?.length == 0}
 		<div class="text-xs text-secondary p-8"> No logs found for the selected filters. </div>
+	{:else if loading}
+		<div style="height: {height}px;" class="flex justify-center items-center">
+			<Loader2 class="animate-spin" />
+		</div>
 	{:else}
 		<VirtualList
 			width="100%"
-			height={tableHeight - headerHeight - footerHeight}
+			{height}
 			itemCount={flatLogs?.length ?? 0}
 			itemSize={(index) => {
 				if (flatLogs?.[index]?.type === 'date') {

frontend/src/lib/components/auditLogs/AuditLogsTable.svelte

@@ -21,6 +21,7 @@
 	let pageIndex: number | undefined = $state(Number(page.url.searchParams.get('page')) || 0)
 	let before: string | undefined = $state(page.url.searchParams.get('before') ?? undefined)
 	let hasMore: boolean = $state(false)
+	let loading: boolean = $state(false)
 	let after: string | undefined = $state(page.url.searchParams.get('after') ?? undefined)
 	let perPage: number | undefined = $state(Number(page.url.searchParams.get('perPage')) || 100)
 	let operation: string = $state(page.url.searchParams.get('operation') ?? 'all')
@@ -107,6 +108,7 @@
 						bind:perPage
 						bind:scope
 						bind:hasMore
+						bind:loading
 					/>
 				</div>
 				<div class="2xl:hidden">
@@ -161,6 +163,7 @@
 					<Pane size={70} minSize={50}>
 						{#if logs}
 							<AuditLogsTable
+								{loading}
 								{logs}
 								{selectedId}
 								bind:pageIndex