feat: add search icon and fetching spinner to filter sidebar search inputs

[impoiler]

Summary

Adds a search icon and a loading spinner to the search inputs in the logs and MCP filter sidebars. When a filter list is actively fetching data, the search icon is replaced with an animated spinner to give users visual feedback. When idle, a static search icon is shown instead of a bare input field.

Changes

• Added a Search icon inside the search input for all SearchableCheckboxList filter sections in both logsFilterSidebar.tsx and mcpFilterSidebar.tsx, positioned absolutely on the left side of the input with appropriate padding adjustments.
• Added a LoaderCircle spinner that replaces the Search icon while isFetching is true, providing real-time feedback during server-side search queries.
• Exposed isFetching from useGetAvailableFilterDataQuery and useGetMCPLogsFilterDataQuery in all filter components (Stop Reason, Models, Aliases, Selected Keys, Virtual Keys, Routing Engines, Routing Rules, Metadata, Tool Names, Servers) and passed it down as a fetching prop to SearchableCheckboxList.
• Added the Search icon to the Session and User plain text inputs, which previously had no icon.
• Fixed indentation in the metadata filter entries block.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

1. Open the logs or MCP logs page with the filter sidebar visible.
2. Expand any searchable filter section (e.g., Models, Aliases, Virtual Keys).
3. Verify a search icon appears on the left side of the search input.
4. Type a query and observe the spinner replacing the search icon while results are being fetched, then reverting to the search icon once the fetch completes.
5. Check the Session and User filter inputs also display the search icon.

cd ui
pnpm i
pnpm build

Screenshots/Recordings

Before: Search inputs had no icon and no loading indicator.

After: Search inputs display a Search icon at rest and an animated LoaderCircle spinner while fetching filter options.

Breaking changes

• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3e98d6e6-43d1-445b-9d5b-232a1286bcdf

📥 Commits

Reviewing files that changed from the base of the PR and between e115afb and 559e3c4.

📒 Files selected for processing (2)

• ui/components/filters/logsFilterSidebar.tsx
• ui/components/filters/mcpFilterSidebar.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• Improvements
  • Filter lists show an animated loading spinner in the search header while data is fetching.
  • Search inputs across logs and MCP filters include a leading search icon and adjusted left padding for consistent alignment.
  • Empty filter sections remain visible when opened; they only hide when closed and inactive.
  • Metadata filters suppress the “No results” message while loading and have refined rendering for more consistent interaction and testability.

Walkthrough

Adds a fetching prop to SearchableCheckboxList to display a LoaderCircle during background queries, adjusts search input layout, and propagates query isFetching into multiple logs and MCP filters; refactors several input renderings (session, user, metadata) to include positioned search icons.

Changes

Filter Loading Indicators

Layer / File(s)	Summary
SearchableCheckboxList fetching support (core) ui/components/filters/logsFilterSidebar.tsx, ui/components/filters/mcpFilterSidebar.tsx	Import LoaderCircle, add optional fetching?: boolean prop, conditionally render a spinner or Search icon in the search header, and apply pl-8 to the search input.
Logs sidebar filters & inputs ui/components/filters/logsFilterSidebar.tsx	StopReason, Models, Aliases, SelectedKeys, VirtualKeys, RoutingEngines, RoutingRules destructure isFetching and pass it as fetching to SearchableCheckboxList. SessionFilter and UserFilter inputs gain positioned leading Search icons with left padding. MetadataFilters uses isFetching to toggle header spinner, adjusts empty-state logic, and gates “No results” on entries.length === 0 && !isFetching.
MCP sidebar fetching integration ui/components/filters/mcpFilterSidebar.tsx	ToolNamesFilter, ServersFilter, VirtualKeysFilter destructure isFetching and pass it as fetching to SearchableCheckboxList; early-return empty/inactive checks now respect section openness (!opened).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• maximhq/bifrost#3568: Touches the same SearchableCheckboxList search-header UI and padding adjustments related to loading indicators.

Poem

🐇 A tiny spinner hums in place,
Hiding in the search's face,
Filters wake as data streams,
Quietly fulfilling dreams,
Hop—click—select, the UI beams.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main feature added: search icons and fetching spinners to filter sidebar search inputs.
Description check	✅ Passed	The description covers all required sections: Summary, Changes, Type of change, Affected areas, How to test, Breaking changes, and a complete Checklist. Content is detailed and well-structured.
Docstring Coverage	✅ Passed	Docstring coverage is 81.25% which is sufficient. The required threshold is 80.00%.
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 05-18-chore_added_search_icon_for_sidebar_filters

---

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

[impoiler]

• feat: add search icon and fetching spinner to filter sidebar search inputs #3563 👈 (View in Graphite)
• feat: add server-side search to filter sidebar checkbox lists via debounced q query param #3568
• feat: add limit and query params to filter data endpoints for server-side search and pagination #3567
• fix: remove defaultFilterDataLimit cap from filter data queries #3561
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 5/5

UI-only change adding icons and a loading spinner to filter inputs; no data-fetching logic or state management is altered.

All changes are confined to presentational wiring in two sidebar components. The one noted issue is a narrow timing window where "No metadata keys" could flash when clearing a search, requiring a one-line fix; it does not corrupt state or affect functionality.

The isEmpty guard in MetadataFilters inside logsFilterSidebar.tsx is the only line worth a second look.

Important Files Changed

Filename	Overview
ui/components/filters/logsFilterSidebar.tsx	Adds Search/LoaderCircle icons to all filter inputs; exposes isFetching for spinner; MetadataFilters "No results" race fixed with !isFetching guard, but isEmpty guard still missing !isFetching check
ui/components/filters/mcpFilterSidebar.tsx	Mirrors logsFilterSidebar changes — adds icons/spinner to SearchableCheckboxList, exposes isFetching for all filters, adds !opened guard to early-return conditions

_{Reviews (6): Last reviewed commit: "chore: added search icon for sidebar fil..." | Re-trigger Greptile}

[coderabbitai]

🧹 Nitpick comments (1)

ui/components/filters/mcpFilterSidebar.tsx (1)

224-224: 💤 Low value

Loading indicator implementation looks solid.

The conditional LoaderCircle/Search icon rendering with proper positioning and the optional fetching prop is well designed. The separation between isLoading (skeleton) and isFetching (spinner) provides clear feedback for initial vs. subsequent loads.

♿ Optional: Consider adding screen reader feedback

For improved accessibility, you could add aria-busy to the input or an aria-live region to announce loading state to screen readers:

 <Input
   ref={inputRef}
   value={query}
   onChange={(e) => setQuery(e.target.value)}
   onKeyDown={(e) => {
     if (e.key === "Enter") {
       e.preventDefault();
       commitCustom();
     }
   }}
   placeholder={placeholder}
   className="h-8 border-0 pl-8 text-xs"
+  aria-busy={fetching}
 />

Also applies to: 233-233, 258-276

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/components/filters/mcpFilterSidebar.tsx` at line 224, The component
currently toggles visual loading states (isLoading skeleton vs isFetching
spinner) but lacks screen-reader feedback; update the input or surrounding
element in mcpFilterSidebar to include aria-busy={isFetching || isLoading}
and/or add a small visually-hidden aria-live region that announces "Loading"
when isFetching/isLoading changes (tie it to the same state used for rendering
the LoaderCircle/Search icons and the fetching prop) so screen readers receive
loading updates.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@ui/components/filters/mcpFilterSidebar.tsx`:
- Line 224: The component currently toggles visual loading states (isLoading
skeleton vs isFetching spinner) but lacks screen-reader feedback; update the
input or surrounding element in mcpFilterSidebar to include
aria-busy={isFetching || isLoading} and/or add a small visually-hidden aria-live
region that announces "Loading" when isFetching/isLoading changes (tie it to the
same state used for rendering the LoaderCircle/Search icons and the fetching
prop) so screen readers receive loading updates.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a0108f78-78b8-49ca-a107-afbbf95ce093

📥 Commits

Reviewing files that changed from the base of the PR and between 502c146 and ff813e1.

📒 Files selected for processing (2)

• ui/components/filters/logsFilterSidebar.tsx
• ui/components/filters/mcpFilterSidebar.tsx

[akshaydeo]

Merge activity

• May 18, 1:40 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 18, 1:46 PM UTC: Graphite rebased this pull request as part of a merge.
• May 18, 1:46 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.