Skip to content

⚡ Bolt: Debounce search input to prevent UI freezing during text entry #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Krosebrook merged 3 commits into from
Mar 5, 2026
+1,641 −11
Merged

⚡ Bolt: Debounce search input to prevent UI freezing during text entry #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0d50fbb
perf: debounce search input in Explore and Dashboard pages
google-labs-jules[bot] Mar 5, 2026
c2a7c44
Update client/src/pages/Dashboard.tsx
Krosebrook Mar 5, 2026
6a73689
Update client/src/pages/Explore.tsx
Krosebrook Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions client/src/hooks/use-debounce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { useState, useEffect } from "react";

export function useDebounce<T>(value: T, delay: number = 300): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);

useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);

return () => {
clearTimeout(timer);
};
}, [value, delay]);

return debouncedValue;
}
12 changes: 7 additions & 5 deletions client/src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Link } from "wouter";
import { motion } from "framer-motion";
import { usePageTitle } from "@/hooks/use-page-title";
import { useState, useMemo } from "react";
import { useDebounce } from "@/hooks/use-debounce";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
Expand All @@ -22,25 +23,26 @@ export default function Dashboard() {
const { data: songs, isLoading } = useSongs();

const [searchQuery, setSearchQuery] = useState("");
const debouncedSearchQuery = useDebounce(searchQuery, 300);
const [genreFilter, setGenreFilter] = useState<string>("all");
const [moodFilter, setMoodFilter] = useState<string>("all");

const filteredSongs = useMemo(() => {
if (!songs) return [];

return songs.filter(song => {
const matchesSearch = searchQuery === "" ||
song.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
song.lyrics.toLowerCase().includes(searchQuery.toLowerCase());
const matchesSearch = debouncedSearchQuery === "" ||
song.title.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) ||
song.lyrics.toLowerCase().includes(debouncedSearchQuery.toLowerCase());
Comment on lines +34 to +36
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inside the songs.filter callback, debouncedSearchQuery.toLowerCase() is recomputed multiple times per song. Since this code is specifically targeting performance during large-list filtering, compute the lower-cased query once per memo execution and reuse it in the predicate to reduce redundant work.

Copilot uses AI. Check for mistakes.

const matchesGenre = genreFilter === "all" || song.genre === genreFilter;
const matchesMood = moodFilter === "all" || song.mood === moodFilter;

return matchesSearch && matchesGenre && matchesMood;
});
}, [songs, searchQuery, genreFilter, moodFilter]);
}, [songs, debouncedSearchQuery, genreFilter, moodFilter]);

const hasActiveFilters = searchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";
const hasActiveFilters = debouncedSearchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";

const clearFilters = () => {
setSearchQuery("");
Expand Down
12 changes: 7 additions & 5 deletions client/src/pages/Explore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import type { Song } from "@shared/schema";
import { GENRES, MOODS } from "@shared/schema";
import { usePageTitle } from "@/hooks/use-page-title";
import { useState, useMemo, memo } from "react";
import { useDebounce } from "@/hooks/use-debounce";

interface PublicSongCardProps {
song: Song;
Expand Down Expand Up @@ -122,6 +123,7 @@ export default function Explore() {
const likedIds = likedData?.likedIds || [];

const [searchQuery, setSearchQuery] = useState("");
const debouncedSearchQuery = useDebounce(searchQuery, 300);
const [genreFilter, setGenreFilter] = useState<string>("all");
const [moodFilter, setMoodFilter] = useState<string>("all");
const [sortBy, setSortBy] = useState<string>("popular");
Expand All @@ -130,9 +132,9 @@ export default function Explore() {
if (!songs) return [];

let filtered = songs.filter(song => {
const matchesSearch = searchQuery === "" ||
song.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
song.lyrics.toLowerCase().includes(searchQuery.toLowerCase());
const matchesSearch = debouncedSearchQuery === "" ||
song.title.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) ||
song.lyrics.toLowerCase().includes(debouncedSearchQuery.toLowerCase());
Comment on lines +135 to +137
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

debouncedSearchQuery.toLowerCase() is computed multiple times per song during filtering. For large lists, it’s cheaper to compute a single lower-cased query once per useMemo run and reuse it inside the filter predicate.

Copilot uses AI. Check for mistakes.

const matchesGenre = genreFilter === "all" || song.genre === genreFilter;
const matchesMood = moodFilter === "all" || song.mood === moodFilter;
Expand All @@ -149,9 +151,9 @@ export default function Explore() {
}

return filtered;
}, [songs, searchQuery, genreFilter, moodFilter, sortBy]);
}, [songs, debouncedSearchQuery, genreFilter, moodFilter, sortBy]);

const hasActiveFilters = searchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";
const hasActiveFilters = debouncedSearchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";
Copy link

@cubic-dev-ai cubic-dev-ai bot Mar 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Use the immediate searchQuery for hasActiveFilters; debouncing this flag makes clear/filter UI state lag behind user input.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At client/src/pages/Explore.tsx, line 156:

<comment>Use the immediate `searchQuery` for `hasActiveFilters`; debouncing this flag makes clear/filter UI state lag behind user input.</comment>

<file context>
@@ -153,7 +153,7 @@ export default function Explore() {
   }, [songs, debouncedSearchQuery, genreFilter, moodFilter, sortBy]);
 
-  const hasActiveFilters = searchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";
+const hasActiveFilters = debouncedSearchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";
 
   const clearFilters = () => {
</file context>
Suggested change
const hasActiveFilters = debouncedSearchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";
const hasActiveFilters = searchQuery !== "" || genreFilter !== "all" || moodFilter !== "all";
Fix with Cubic


const clearFilters = () => {
setSearchQuery("");
Expand Down
Loading
Loading