fix(webapp): Fix for task page search bar re-rendering bug

[samejr]

Summary

Typing in the search bar on the task page could clear or reset the input mid-keystroke. This fixes the re-render race so the field stays stable while you type.

Root cause

Two things compounded:

• SearchInput's sync effect depended on text, so it re-ran on every keystroke and could overwrite the input with the URL/controlled value while focused.
• Each task row unmounted and remounted its activity chart during the side-panel open/close animation (25 charts at once), forcing heavy re-renders that the search effect raced against.

Fix

• SearchInput now tracks the last synced value in a ref instead of comparing against text, keeping the effect off the keystroke path. It only writes to state when the incoming URL/controlled value actually changes, and never while the input is focused.
• Activity charts are now hidden (hidden attribute) instead of unmounted during the panel animation, so the rows don't churn the tree and the resize stays smooth.

[changeset-bot]

⚠️ No Changeset found

Latest commit: fb28ba5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 217b40d7-2145-4db8-b839-d833a627fe88

📥 Commits

Reviewing files that changed from the base of the PR and between b670551 and fb28ba5.

📒 Files selected for processing (1)

• apps/webapp/app/components/primitives/SearchInput.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/webapp/app/components/primitives/SearchInput.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)

• GitHub Check: webapp / 🧪 Unit Tests: Webapp (7, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (10, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (9, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (4, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (2, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (6, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (5, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (1, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (3, 10)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (8, 10)
• GitHub Check: typecheck / typecheck
• GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp
• GitHub Check: audit
• GitHub Check: Analyze (javascript-typescript)

---

Walkthrough

Two independent UI fixes are applied to the webapp. In SearchInput, the useEffect synchronization logic is refactored to introduce a lastSyncedRef that tracks the last synced search value, replacing direct comparisons against text state; controlled and uncontrolled modes each use this ref to gate when setText is called. In the tasks list route, per-row activity charts are changed from conditionally unmounted to always mounted, with visibility toggled via hidden={isPanelAnimating} on a fixed-size wrapper, preserving the existing Suspense/TypedAwait loading structure. A changelog entry documents the fix for task page search bar clearing during typing.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the summary, root cause, and the fix implemented. However, it is missing required sections: the issue number link, testing steps, changelog, screenshots, and the checklist.	Add the missing template sections: Closes #, testing steps, changelog entry, screenshots (if applicable), and complete the checklist items.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main fix: a re-rendering bug in the task page search bar.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix(webapp)-bug-with-task-search

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@trigger.dev/build

npm i https://pkg.pr.new/@trigger.dev/build@32b4dba

trigger.dev

npm i https://pkg.pr.new/trigger.dev@32b4dba

@trigger.dev/core

npm i https://pkg.pr.new/@trigger.dev/core@32b4dba

@trigger.dev/python

npm i https://pkg.pr.new/@trigger.dev/python@32b4dba

@trigger.dev/react-hooks

npm i https://pkg.pr.new/@trigger.dev/react-hooks@32b4dba

@trigger.dev/redis-worker

npm i https://pkg.pr.new/@trigger.dev/redis-worker@32b4dba

@trigger.dev/rsc

npm i https://pkg.pr.new/@trigger.dev/rsc@32b4dba

@trigger.dev/schema-to-json

npm i https://pkg.pr.new/@trigger.dev/schema-to-json@32b4dba

@trigger.dev/sdk

npm i https://pkg.pr.new/@trigger.dev/sdk@32b4dba

commit: 32b4dba