From cc66ae524bec2a2a0aa977f569ba0136002cef9a Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 16 Mar 2026 14:25:48 +0000 Subject: [PATCH] feat: debounce search input to optimize performance Added a debounce wrapper around the `renderPDFs` function when attached to the `searchInput` event listener. This significantly reduces the frequency of DOM re-renders and list filtering operations while the user is typing, greatly improving UI responsiveness. Co-authored-by: MrAlokTech <107493955+MrAlokTech@users.noreply.github.com> --- .jules/bolt.md | 3 +++ script.js | 16 +++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 .jules/bolt.md diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000..e7856c3 --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2026-03-16 - [Debouncing Search Re-renders] +**Learning:** Avoid micro-optimizing date creation inside render loops if it breaks variable scoping or introduces messy global states. A much higher-impact optimization for vanilla JS lists is simply debouncing the input event that triggers the render loop in the first place, ensuring the heavy DOM manipulation function isn't called on every single keystroke. +**Action:** Always check the event listener attachments for high-frequency events (like `input` or `scroll`) before trying to micro-optimize the render loop itself. Debounce or throttle these handlers to reduce total render calls dramatically. diff --git a/script.js b/script.js index 22f399d..271cd1f 100644 --- a/script.js +++ b/script.js @@ -658,8 +658,22 @@ function activateHoliday(overlay) { /* ========================================= 7. EVENT LISTENERS ========================================= */ +// Utility: Debounce function to limit the rate at which a function fires +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + function setupEventListeners() { - searchInput.addEventListener('input', renderPDFs); + // Debounce the search input to significantly reduce DOM renders on every keystroke + searchInput.addEventListener('input', debounce(renderPDFs, 300)); tabBtns.forEach(btn => { btn.addEventListener('click', handleSemesterChange);