Merge pull request #29 from viamrobotics/add-slow-response-indicator-to-vision-service

APP-15593 Add slow response indicator to vision service

Author: DTCurrie

.changeset/lazy-zoos-hammer.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/test-widgets': patch
+---
+
+Show slow loading indicator for vision service widget

src/lib/components/widgets/vision-service/__tests__/use-slow-request.svelte.spec.ts

@@ -0,0 +1,111 @@
+import { flushSync } from 'svelte'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSlowRequest } from '../use-slow-request.svelte.ts'
+
+describe('useSlowRequest', () => {
+	beforeEach(() => {
+		vi.useFakeTimers()
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	it('is not slow initially when not fetching', () => {
+		const cleanup = $effect.root(() => {
+			const result = useSlowRequest(() => false)
+			flushSync()
+			expect(result.isSlow).toBe(false)
+		})
+		cleanup()
+	})
+
+	it('is not slow before the 5s threshold elapses', () => {
+		let isFetching = $state(false)
+		const cleanup = $effect.root(() => {
+			const result = useSlowRequest(() => isFetching)
+			flushSync()
+
+			isFetching = true
+			flushSync()
+			vi.advanceTimersByTime(4999)
+			expect(result.isSlow).toBe(false)
+		})
+		cleanup()
+	})
+
+	it('becomes slow after the 5s threshold elapses while fetching', () => {
+		let isFetching = $state(false)
+		const cleanup = $effect.root(() => {
+			const result = useSlowRequest(() => isFetching)
+			flushSync()
+
+			isFetching = true
+			flushSync()
+			vi.advanceTimersByTime(5000)
+			expect(result.isSlow).toBe(true)
+		})
+		cleanup()
+	})
+
+	it('resets to not slow when fetching completes', () => {
+		let isFetching = $state(false)
+		const cleanup = $effect.root(() => {
+			const result = useSlowRequest(() => isFetching)
+			flushSync()
+
+			isFetching = true
+			flushSync()
+			vi.advanceTimersByTime(5000)
+			expect(result.isSlow).toBe(true)
+
+			isFetching = false
+			flushSync()
+			expect(result.isSlow).toBe(false)
+		})
+		cleanup()
+	})
+
+	it('does not become slow if fetching completes before the threshold', () => {
+		let isFetching = $state(false)
+		const cleanup = $effect.root(() => {
+			const result = useSlowRequest(() => isFetching)
+			flushSync()
+
+			isFetching = true
+			flushSync()
+			vi.advanceTimersByTime(4000)
+			isFetching = false
+			flushSync()
+			vi.advanceTimersByTime(5000)
+			expect(result.isSlow).toBe(false)
+		})
+		cleanup()
+	})
+
+	it('restarts the timer when a new fetch begins', () => {
+		let isFetching = $state(false)
+		const cleanup = $effect.root(() => {
+			const result = useSlowRequest(() => isFetching)
+			flushSync()
+
+			isFetching = true
+			flushSync()
+			vi.advanceTimersByTime(5000)
+			expect(result.isSlow).toBe(true)
+
+			isFetching = false
+			flushSync()
+			expect(result.isSlow).toBe(false)
+
+			isFetching = true
+			flushSync()
+			vi.advanceTimersByTime(4999)
+			expect(result.isSlow).toBe(false)
+			vi.advanceTimersByTime(1)
+			expect(result.isSlow).toBe(true)
+		})
+		cleanup()
+	})
+})

src/lib/components/widgets/vision-service/use-slow-request.svelte.ts

@@ -0,0 +1,27 @@
+const SLOW_REQUEST_THRESHOLD_MS = 5000
+
+export const useSlowRequest = (isFetching: () => boolean) => {
+	let isSlow = $state(false)
+
+	$effect(() => {
+		if (!isFetching()) {
+			isSlow = false
+			return
+		}
+
+		isSlow = false
+		const timeout = setTimeout(() => {
+			isSlow = true
+		}, SLOW_REQUEST_THRESHOLD_MS)
+
+		return () => {
+			clearTimeout(timeout)
+		}
+	})
+
+	return {
+		get isSlow() {
+			return isSlow
+		},
+	}
+}

src/lib/components/widgets/vision-service/vision-service.svelte

@@ -15,6 +15,7 @@
 
 	import Image from './image.svelte'
 	import ObjectPointClouds from './object-point-clouds.svelte'
+	import { useSlowRequest } from './use-slow-request.svelte.ts'
 
 	const { addImageToDataset } = useAddImageToDataset()
 
@@ -106,10 +107,16 @@
 				: (Math.max(getObjectPointCloudsRefetchInterval.current, 1000 / 20) as number | false),
 	}))
 
+	const captureAllSlow = useSlowRequest(() => captureAllQuery.isFetching)
+	const propertiesSlow = useSlowRequest(() => propertiesQuery.isFetching)
+	const objectPointCloudsSlow = useSlowRequest(() => getObjectPointCloudsQuery.isFetching)
+
 	const onCameraSelect = (event: Event) => {
 		const { value } = event.target as HTMLSelectElement
 		cameraName = value
 	}
+
+	const detectionsSlow = $derived(captureAllSlow.isSlow || propertiesSlow.isSlow)
 </script>
 
 <ConnectionStatus {partID}>
@@ -183,10 +190,19 @@
 				{/if}
 			</div>
 
+			{#if detectionsSlow}
+				<p class="text-subtle-2 text-xs italic">This request is taking a long time to complete.</p>
+			{/if}
+
 			<Queries
 				queries={[propertiesQuery, captureAllQuery]}
 				contentCx="p-4 h-14"
 			>
+				{#if detectionsSlow}
+					<p class="text-subtle-2 text-xs italic">
+						This request is taking a long time to complete.
+					</p>
+				{/if}
 				{#if captureAllQuery.data}
 					<Image
 						data={captureAllQuery.data}
@@ -213,11 +229,20 @@
 				/>
 			</div>
 
+			{#if showObjectPointClouds && objectPointCloudsSlow}
+				<p class="text-subtle-2 text-xs italic">This request is taking a long time to complete.</p>
+			{/if}
+
 			{#if showObjectPointClouds}
 				<Queries
 					queries={[getObjectPointCloudsQuery]}
 					contentCx="p-4 h-14"
 				>
+					{#if objectPointCloudsSlow.isSlow}
+						<p class="text-subtle-2 text-xs italic">
+							This request is taking a long time to complete.
+						</p>
+					{/if}
 					{#if getObjectPointCloudsQuery.data !== undefined}
 						<ObjectPointClouds objects={getObjectPointCloudsQuery.data} />
 					{/if}