Fix flaky Playwright tests by getting rid of DebouncedInput#1666
Conversation
Don't use DebouncedInput in FilterBar as it's causing Playwright test failures where links briefly aren't clickable. Doing the debouncing directly in FilterBar eliminates the issue.
No longer used anywhere
📝 WalkthroughWalkthroughThe changes remove the Changes
Assessment against linked issues
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/lib/components/FilterBar/FilterBar.svelte (1)
62-68: Edge-case:debounce = 0still instantiates a debouncerPassing
0falls into the debounced branch, yet offers no practical delay and adds the overhead ofDebounced.
Consider treating0as “no debounce” to keep semantics clear:if (debounce === false || debounce === 0) { watcher = () => undebouncedSearch; } else { … }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (3)
frontend/src/lib/components/FilterBar/FilterBar.svelte(3 hunks)frontend/src/lib/forms/DebouncedInput.svelte(0 hunks)frontend/src/lib/forms/index.ts(0 hunks)
💤 Files with no reviewable changes (2)
- frontend/src/lib/forms/index.ts
- frontend/src/lib/forms/DebouncedInput.svelte
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Build API / publish-api
- GitHub Check: Build UI / publish-ui
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (csharp)
- GitHub Check: check-and-lint
🔇 Additional comments (1)
frontend/src/lib/components/FilterBar/FilterBar.svelte (1)
65-67:Details
❓ Verification inconclusive
Remember to dispose of the
Debouncedinstance
new Debounced()allocates timers that continue to run unless.dispose()(or.cancel(), depending on the API) is called.
Add anonDestroyhook to clean up and avoid leaks when the component unmounts.const debouncer = new Debounced(() => undebouncedSearch, debounceTime); watcher = () => debouncer.current; + + onDestroy(() => { + debouncer.dispose?.(); // or debouncer.cancel() + });
🏁 Script executed:
#!/bin/bash echo "Searching for Debounced class definition..." rg --line-number "class Debounced" . echo echo "Searching for Debounced usage and method names..." rg --line-number "Debounced" . echo echo "Checking for onDestroy import in FilterBar.svelte..." rg --line-number "onDestroy" frontend/src/lib/components/FilterBar/FilterBar.svelteLength of output: 1745
Ensure the
Debouncedinstance is cleaned up on component destroy
Debouncedallocates timers which will continue running unless explicitly disposed. Add anonDestroyhook to avoid leaks:• Import
onDestroyfromsvelte
• Call the appropriate cleanup method (disposeorcancel) on yourdebouncerSuggested diff:
--- a/frontend/src/lib/components/FilterBar/FilterBar.svelte +++ b/frontend/src/lib/components/FilterBar/FilterBar.svelte @@ -import { Previous, Debounced, watch } from 'runed'; +import { Previous, Debounced, watch } from 'runed'; +import { onDestroy } from 'svelte'; const debounceTime: number = debounce === true ? DEFAULT_DEBOUNCE_TIME : debounce; const debouncer = new Debounced(() => undebouncedSearch, debounceTime); watcher = () => debouncer.current; + +onDestroy(() => { + debouncer.dispose?.(); // or debouncer.cancel(), depending on Debounced API +});Please verify the correct cleanup method available on
Debounced.
| watch(watcher, (value) => { | ||
| $allFilters[searchKey] = value as Filters[typeof searchKey]; | ||
| }); |
There was a problem hiding this comment.
Re-assign the store instead of mutating it in-place
$allFilters[searchKey] = … mutates the underlying object without emitting a set, so Svelte subscribers will not be notified and downstream derived values/UI will not update.
Re-assign the store value (or use allFilters.update) to preserve reactivity.
- $allFilters[searchKey] = value as Filters[typeof searchKey];
+ $allFilters = {
+ ...$allFilters,
+ [searchKey]: value as Filters[typeof searchKey],
+ };📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| watch(watcher, (value) => { | |
| $allFilters[searchKey] = value as Filters[typeof searchKey]; | |
| }); | |
| watch(watcher, (value) => { | |
| - $allFilters[searchKey] = value as Filters[typeof searchKey]; | |
| + $allFilters = { | |
| + ...$allFilters, | |
| + [searchKey]: value as Filters[typeof searchKey], | |
| + }; | |
| }); |
🤖 Prompt for AI Agents
In frontend/src/lib/components/FilterBar/FilterBar.svelte around lines 69 to 71,
the code mutates the $allFilters store object directly, which does not trigger
Svelte reactivity updates. To fix this, re-assign the entire store value by
creating a new object that copies the existing filters and updates the searchKey
property, or use the allFilters.update method to update the store reactively.
This ensures subscribers and derived values are properly notified and UI updates
accordingly.
|
Closing in favor of #1665. |
1 participant
Having an input with two bindable values,
valueandundebouncedValue, was causing too many complications, leading to failed Playwright tests from timing issues. Now PlainInput is just a plain input, there is no DebouncedInput, and the few places that needed debouncing from DebouncedInput will do the debouncing themselves.Fixes #1661.