feat(sidebar): adds debounce on sidebar search

packages/bruno-app/src/components/Sidebar/Collections/index.js

@@ -8,6 +8,10 @@ import CollectionSearch from './CollectionSearch/index';
 import InlineCollectionCreator from './InlineCollectionCreator';
 import path, { normalizePath } from 'utils/common/path';
 import { isScratchCollection } from 'utils/collections';
+import useDebounce from 'hooks/useDebounce';
+
+const SEARCH_DEBOUNCE_MS = 300;
+const isEmptyQuery = (value) => value === '';
 
 const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
 
@@ -21,6 +25,7 @@ const getSidebarEntryName = (entry) => {
 
 const Collections = ({ showSearch, isCreatingCollection, onCreateClick, onDismissCreate, onOpenAdvancedCreate }) => {
   const [searchText, setSearchText] = useState('');
+  const debouncedSearchText = useDebounce(searchText, SEARCH_DEBOUNCE_MS, { skipDebounce: isEmptyQuery });
   const { collections, collectionSortOrder } = useSelector((state) => state.collections);
   const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
 
@@ -92,7 +97,7 @@ const Collections = ({ showSearch, isCreatingCollection, onCreateClick, onDismis
         )}
         {sidebarEntries.map((entry) => {
           if (entry.kind === 'loaded') {
-            return <Collection searchText={searchText} collection={entry.collection} key={entry.key} />;
+            return <Collection searchText={debouncedSearchText} collection={entry.collection} key={entry.key} />;
           }
           return <GitRemoteCollectionRow entry={entry.entry} key={entry.key} />;
         })}

packages/bruno-app/src/hooks/useDebounce/index.js

@@ -1,19 +1,33 @@
 import { useState, useEffect } from 'react';
 
-function useDebounce(value, delay) {
+/**
+ *
+ * @param {*} value
+ * @param {number} delay - Debounce delay in milliseconds.
+ * @param {object} [options]
+ * @param {(value: *) => boolean} [options.skipDebounce] - Values matching
+ *   this are applied immediately instead of being debounced.
+ */
+function useDebounce(value, delay, { skipDebounce } = {}) {
   const [debouncedValue, setDebouncedValue] = useState(value);
+  const isImmediate = typeof skipDebounce === 'function' && skipDebounce(value);
 
   useEffect(() => {
+    if (isImmediate) {
+      setDebouncedValue(value);
+      return;
+    }
+
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
 
     return () => {
       clearTimeout(handler);
     };
-  }, [value, delay]);
+  }, [value, delay, isImmediate]);
 
-  return debouncedValue;
+  return isImmediate ? value : debouncedValue;
 }
 
 export default useDebounce;

packages/bruno-app/src/hooks/useDebounce/index.spec.js

@@ -0,0 +1,114 @@
+import { renderHook, act } from '@testing-library/react';
+import useDebounce from './index';
+
+const DELAY = 300;
+const isEmpty = (value) => value === '';
+
+const renderDebounce = (initialValue, options) =>
+  renderHook(({ value }) => useDebounce(value, DELAY, options), {
+    initialProps: { value: initialValue }
+  });
+
+describe('useDebounce', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('returns the initial value without waiting for the delay', () => {
+    const { result } = renderDebounce('abc');
+
+    expect(result.current).toBe('abc');
+  });
+
+  it('holds the previous value until the delay elapses', () => {
+    const { result, rerender } = renderDebounce('abc');
+
+    rerender({ value: 'abcd' });
+    expect(result.current).toBe('abc');
+
+    act(() => {
+      jest.advanceTimersByTime(DELAY - 1);
+    });
+    expect(result.current).toBe('abc');
+
+    act(() => {
+      jest.advanceTimersByTime(1);
+    });
+    expect(result.current).toBe('abcd');
+  });
+
+  it('restarts the delay on each change so only the last value lands', () => {
+    const { result, rerender } = renderDebounce('a');
+
+    rerender({ value: 'ab' });
+    act(() => {
+      jest.advanceTimersByTime(200);
+    });
+
+    rerender({ value: 'abc' });
+    act(() => {
+      jest.advanceTimersByTime(200);
+    });
+    expect(result.current).toBe('a');
+
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+    expect(result.current).toBe('abc');
+  });
+
+  describe('skipDebounce', () => {
+    it('applies a matching value without waiting for the delay', () => {
+      const { result, rerender } = renderDebounce('abc', { skipDebounce: isEmpty });
+
+      act(() => {
+        jest.advanceTimersByTime(DELAY);
+      });
+      expect(result.current).toBe('abc');
+
+      rerender({ value: '' });
+      expect(result.current).toBe('');
+    });
+
+    it('does not resurface the cleared value when a new one is typed inside the delay', () => {
+      const { result, rerender } = renderDebounce('abc', { skipDebounce: isEmpty });
+
+      act(() => {
+        jest.advanceTimersByTime(DELAY);
+      });
+      expect(result.current).toBe('abc');
+
+      rerender({ value: '' });
+      expect(result.current).toBe('');
+
+      // Retyped well inside the delay: the pending clear is cancelled, so without
+      // the immediate path the hook would still be holding 'abc' here.
+      rerender({ value: 'x' });
+      act(() => {
+        jest.advanceTimersByTime(DELAY - 1);
+      });
+      expect(result.current).toBe('');
+
+      act(() => {
+        jest.advanceTimersByTime(1);
+      });
+      expect(result.current).toBe('x');
+    });
+
+    it('leaves non-matching values on the trailing edge', () => {
+      const { result, rerender } = renderDebounce('abc', { skipDebounce: isEmpty });
+
+      rerender({ value: 'abcd' });
+      expect(result.current).toBe('abc');
+
+      act(() => {
+        jest.advanceTimersByTime(DELAY);
+      });
+      expect(result.current).toBe('abcd');
+    });
+  });
+});