feat(global-search): show indexing spinner for a minimum time

Author: elmarburke

plugins/global-search/src/components/SearchScene.tsx

@@ -8,6 +8,7 @@ import type { RootNodeType } from "../utils/indexer/types"
 import { useIndexer } from "../utils/indexer/useIndexer"
 import { entries } from "../utils/object"
 import { getPluginUiOptions } from "../utils/plugin-ui"
+import { useMinimumDuration } from "../utils/useMinimumDuration"
 import { NoResults } from "./NoResults"
 import { ResultsList } from "./Results"
 import { SearchInput } from "./SearchInput"
@@ -20,6 +21,7 @@ export function SearchScene() {
     const [query, setQuery] = useState("")
     const { searchOptions, optionsMenuItems } = useOptionsMenuItems()
     const deferredQuery = useDeferredValue(query)
+    const isIndexingWithMinimumDuration = useMinimumDuration(isIndexing, 500)
 
     const { results, hasResults, error: filterError } = useAsyncFilter(deferredQuery, searchOptions, db, dataVersion)
 
@@ -46,15 +48,15 @@ export function SearchScene() {
                     )}
                 >
                     <SearchInput value={query} onChange={handleQueryChange} />
-                    {isIndexing && (
-                        // TODO: Discuss if we should add a tooltip to explain what's this.
-                        <span
-                            title="Indexing..."
-                            className="animate-[fade-in_150ms_forwards] [animation-delay:500ms] opacity-0"
-                        >
-                            <IconSpinner className="text-black dark:text-white animate-[spin_0.8s_linear_infinite]" />
-                        </span>
-                    )}
+
+                    <span
+                        title="Indexing..."
+                        className="aria-hidden:opacity-0 transition"
+                        aria-hidden={!isIndexingWithMinimumDuration}
+                    >
+                        <IconSpinner className="text-black dark:text-white animate-[spin_0.8s_linear_infinite]" />
+                    </span>
+
                     <Menu items={optionsMenuItems}>
                         <IconEllipsis className="text-framer-text-tertiary-light dark:text-framer-text-tertiary-dark" />
                     </Menu>

plugins/global-search/src/utils/useMinimumDuration.test.ts

@@ -0,0 +1,107 @@
+import { act, renderHook } from "@testing-library/react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { useMinimumDuration } from "./useMinimumDuration"
+
+function advanceTimersByTime(time: number) {
+    act(() => {
+        vi.advanceTimersByTime(time)
+    })
+}
+
+describe("useMinimumDuration", () => {
+    beforeEach(() => {
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        vi.runOnlyPendingTimers()
+        vi.useRealTimers()
+    })
+
+    it("should delay returning false when input becomes false", () => {
+        const { result, rerender } = renderHook(({ value }) => useMinimumDuration(value, 1000), {
+            initialProps: { value: true },
+        })
+
+        expect(result.current).toBe(true)
+
+        rerender({ value: false })
+        expect(result.current).toBe(true)
+
+        advanceTimersByTime(500)
+
+        expect(result.current).toBe(true)
+
+        advanceTimersByTime(500)
+
+        expect(result.current).toBe(false)
+    })
+
+    it("should cancel delay when input becomes true again during delay period", () => {
+        const { result, rerender } = renderHook(({ value }) => useMinimumDuration(value, 1000), {
+            initialProps: { value: true },
+        })
+
+        expect(result.current).toBe(true)
+
+        rerender({ value: false })
+        expect(result.current).toBe(true)
+
+        advanceTimersByTime(500)
+
+        expect(result.current).toBe(true)
+
+        rerender({ value: true })
+        expect(result.current).toBe(true)
+
+        advanceTimersByTime(600)
+
+        expect(result.current).toBe(true)
+
+        rerender({ value: false })
+        expect(result.current).toBe(true)
+
+        advanceTimersByTime(1000)
+
+        expect(result.current).toBe(false)
+    })
+
+    it("should handle multiple rapid changes correctly", () => {
+        const { result, rerender } = renderHook(({ value }) => useMinimumDuration(value, 1000), {
+            initialProps: { value: false },
+        })
+
+        expect(result.current).toBe(false)
+
+        rerender({ value: true })
+        expect(result.current).toBe(true)
+
+        rerender({ value: false })
+        expect(result.current).toBe(true)
+
+        rerender({ value: true })
+        expect(result.current).toBe(true)
+
+        rerender({ value: false })
+        expect(result.current).toBe(true)
+
+        advanceTimersByTime(1000)
+
+        expect(result.current).toBe(false)
+    })
+
+    it("should clean up timeout on unmount to prevent memory leaks", () => {
+        const clearTimeoutSpy = vi.spyOn(global, "clearTimeout")
+
+        const { unmount, rerender } = renderHook(({ value }) => useMinimumDuration(value, 1000), {
+            initialProps: { value: true },
+        })
+
+        rerender({ value: false })
+        unmount()
+
+        expect(clearTimeoutSpy).toHaveBeenCalled()
+
+        clearTimeoutSpy.mockRestore()
+    })
+})

plugins/global-search/src/utils/useMinimumDuration.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react"
+
+/**
+ * Hook that ensures a boolean value stays `true` for a minimum duration.
+ * When the input becomes `true`, it immediately returns `true`.
+ * When the input becomes `false`, it delays returning `false` for the specified duration.
+ * If the input becomes `true` again during the delay, the delay is cancelled.
+ *
+ * @param value - The boolean value to control
+ * @param minDuration - Minimum duration in milliseconds to keep the value `true`
+ * @returns The controlled boolean value
+ */
+export function useMinimumDuration(value: boolean, minDuration: number): boolean {
+    const [delayedValue, setDelayedValue] = useState(value)
+    const timeoutRef = useRef<number>()
+
+    useEffect(() => {
+        if (value) {
+            clearTimeout(timeoutRef.current)
+            setDelayedValue(true)
+        } else if (delayedValue) {
+            timeoutRef.current = window.setTimeout(() => {
+                setDelayedValue(false)
+            }, minDuration)
+        }
+
+        return () => {
+            clearTimeout(timeoutRef.current)
+        }
+    }, [value, delayedValue, minDuration])
+
+    return delayedValue
+}