79 lines
2.5 KiB
Markdown
79 lines
2.5 KiB
Markdown
|
# 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)
|
||
|
|
|
||
|
|
6. **`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)
|
||
|
|
|
||
|
|
7. **`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
|
||
|
|
|
||
|
|
- [x] Audit all search inputs
|
||
|
|
- [x] 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)
|