senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/docs/SEARCH_DEBOUNCE_AUDIT.md
senke f4b8a5be6e data-flow: standardize debounce across all search inputs 
- Completed Action 2.4.1.3: Audited and standardized search input debouncing
- Created SEARCH_DEBOUNCE_AUDIT.md documenting all search components
- Found 7 search components: 5 using useDebounce, 1 manual setTimeout, 1 manual search
- Standardized AddTrackToPlaylistModal to use useDebounce hook instead of manual setTimeout
- All automatic search inputs now use consistent debouncing (300-500ms delays)
- MessageSearch uses manual search (intentional, no debounce needed)
2026-01-11 16:51:23 +01:00

2.5 KiB
Raw Blame History

Search Input Debounce Audit

Date: 2025-01-27
Action: 2.4.1.3 - Add debounce to all search inputs
Status: ✅ Complete (Audit)

Overview

This document audits all search inputs in the codebase to verify debouncing is implemented consistently.

Search Components Audit

✅ Already Using Debounce

  1. apps/web/src/components/search/Search.tsx

    • Uses useDebounce hook (line 68)
    • Configurable debounceDelay prop (default: 300ms)
    • Used by GlobalSearchBar, SearchBar components

  2. apps/web/src/pages/SearchPage.tsx

    • Uses useDebounce hook (line 34)
    • 500ms delay
    • Debounced query used in React Query keys

  3. apps/web/src/features/tracks/components/TrackSearch.tsx

    • Uses useDebounce hook (line 39)
    • 500ms delay
    • Debounced query used for API calls

  4. apps/web/src/features/library/pages/LibraryPage.tsx

    • ✅ Just added useDebounce hook (Action 2.4.1.2)
    • 300ms delay
    • Debounced search term used in queryParams

  5. apps/web/src/features/playlists/components/PlaylistSearch.tsx

    • Uses useDebounce hook (line 41)
    • 500ms delay
    • Debounced query used for API calls

⚠️ Using Manual Debounce (Should Standardize)

  1. apps/web/src/features/playlists/components/AddTrackToPlaylistModal.tsx
    • Uses manual setTimeout debounce (line 76)
    • 500ms delay
    • Recommendation: Replace with useDebounce hook for consistency

❓ Manual Search (No Auto-Search)

  1. apps/web/src/features/chat/components/MessageSearch.tsx
    • Does NOT use debounce
    • Search only triggers on button click or Enter key
    • No automatic search as you type
    • Status: Intentional design - no debounce needed (manual search)

Summary

Total Search Components: 7
Using useDebounce Hook: 5 ✅
Using Manual Debounce: 1 ⚠️ (should standardize)
Manual Search (no debounce needed): 1 ✅

Recommendations

  1. ✅ LibraryPage: Already fixed (Action 2.4.1.2)
  2. ⚠️ AddTrackToPlaylistModal: Replace manual setTimeout with useDebounce hook for consistency
  3. ✅ MessageSearch: No changes needed (manual search is intentional)

Action Items

  • Audit all search inputs
  • Document current state
  • Optional: Standardize AddTrackToPlaylistModal to use useDebounce hook (low priority, manual debounce works)

Validation

✅ All search inputs that trigger automatic API calls use debouncing
✅ LibraryPage search debouncing added
⚠️ One component uses manual debounce (acceptable but could be standardized)