fix(ui): improve search page UX

[ShroXd]

🔗 Linked issue

Resolves #2112

🧭 Context

As the linked issue mentioned, the search page layout shifts too much during typing, which is not a good user experience.

📚 Description

Several UX improvements to the search page.

1. Add debounce to searching, the delay is 250ms, same value as updateUrlQuery.
2. Tweak transition animation binding on the element to prevent flicker during searching.
3. Improve calculation logic of showClaimPrompt to make the behavior more intuitive.
4. Add transition to suggestion area to improve the user experience.

Screen.Recording.2026-03-17.at.14.24.18.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 17, 2026 6:54am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 17, 2026 6:54am
npmx-lunaria	Ignored		Mar 17, 2026 6:54am

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 3 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/useGlobalSearch.ts	50.00%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 662ebaf4-92a2-4128-b188-2b5d570ff2da

📥 Commits

Reviewing files that changed from the base of the PR and between 1e89802 and bee7094.

📒 Files selected for processing (1)

• app/pages/search.vue

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

• app/pages/search.vue

---

📝 Walkthrough

Walkthrough

This PR adds a reactive threshold (newSearchBatchSize) to Package List rendering to restrict fade/slide animations and stagger delays to items loaded via scrolling, and resets that threshold when a new search result set arrives. It centralises search debounce behaviour in useGlobalSearch by introducing SEARCH_DEBOUNCE_MS (250ms), a debounced commitSearchQuery with flush/cancel semantics, and uses it in instantSearch and URL updates. search.vue refactors show-claim prompt logic with explicit short-circuit returns, wraps suggestion blocks in Transition for enter/leave animations, and adjusts claim button transition/disabled handling.

Possibly related PRs

• perf: search improvements #1431: Modifies useGlobalSearch debounce and flush logic for committing search queries (strong overlap with this PR's debounced commit/flush changes).
• feat: show package claim for not connected users #1514: Changes claim-prompt and suggestion rendering in search.vue (overlaps with Transition wrapping and claim prompt logic here).
• perf: speed up algolia 🚀 + split out search suggestion logic #1271: Centralises debounce constants and adjusts URL-update debounce behaviour in search-related composables (related to SEARCH_DEBOUNCE_MS introduction).

Suggested labels

front

Suggested reviewers

• danielroe
• ghostdevv
• knowler

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, describing UX improvements to the search page including debouncing, animation tweaks, prompt logic, and transitions.
Linked Issues check	✅ Passed	The PR addresses all coding requirements from issue #2112: debounce delay prevents rapid state changes, animation tweaks prevent flicker, improved showClaimPrompt logic prevents premature button removal, and transitions smooth the suggestion area.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue #2112 objectives: debounce implementation, animation binding adjustments, showClaimPrompt logic improvements, and suggestion transitions serve to prevent layout shifts during typing.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Package/List.vue (1)

122-133: ⚠️ Potential issue | 🟠 Major

Handle empty→non-empty results as a new-search reset.

At Line 129, the reset condition skips the oldResults.length === 0 && newResults.length > 0 transition. That leaves newSearchBatchSize stale (often Infinity or 0) and breaks the intended animation split for subsequent appended items.

💡 Proposed fix

 watch(
   () => props.results,
   (newResults, oldResults) => {
     // If this looks like a new search (different first item or much shorter), reset
     if (
       !oldResults ||
+      oldResults.length === 0 ||
       newResults.length === 0 ||
-      (oldResults.length > 0 && newResults[0]?.package.name !== oldResults[0]?.package.name)
+      newResults[0]?.package.name !== oldResults[0]?.package.name
     ) {
       hasScrolledToInitial.value = false
       newSearchBatchSize.value = newResults.length
     }
   },
 )

🧹 Nitpick comments (1)

app/components/Package/List.vue (1)

182-190: Consider extracting the repeated animation binding into a helper.

The same :class/:style animation logic is duplicated in both card branches. A small helper/computed would reduce drift risk when tuning animation behaviour later.

Also applies to: 241-249

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3beedd05-2a22-4856-a16f-47aed15ba65e

📥 Commits

Reviewing files that changed from the base of the PR and between 8ee186a and 1e89802.

📒 Files selected for processing (3)

• app/components/Package/List.vue
• app/composables/useGlobalSearch.ts
• app/pages/search.vue

[pauliecodes]

Tested this locally and the search debounce and the layout shift fixes for the Claim button work really well. LGTM!