Skip to content

Comments

4284 client - Fix component filter flicker and add loading spinner#4285

Open
ivicac wants to merge 2 commits intomasterfrom
4284
Open

4284 client - Fix component filter flicker and add loading spinner#4285
ivicac wants to merge 2 commits intomasterfrom
4284

Conversation

@ivicac
Copy link
Contributor

@ivicac ivicac commented Feb 22, 2026

Use keepPreviousData in the component search query to prevent the list
from flashing the full unfiltered set while new results load, and show
a spinning Loader2Icon inside the search input during fetches.

Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com

Use keepPreviousData in the component search query to prevent the list
from flashing the full unfiltered set while new results load, and show
a spinning Loader2Icon inside the search input during fetches.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Improves the workflow editor component search UX by preventing list flicker during filtered searches and surfacing in-flight search state via an inline loading indicator.

Changes:

  • Uses React Query keepPreviousData for the component-definition search query to avoid flashing unfiltered results while new results load.
  • Renames/exposes search state from isSearchLoading to isSearchFetching and wires it through to the component list UI.
  • Adds Vitest coverage for the hook behavior and the spinner visibility in the component list.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
client/src/shared/queries/platform/componentDefinitionsGraphQL.queries.ts Adds placeholderData: keepPreviousData and exposes isFetching from the query result.
client/src/pages/platform/workflow-editor/hooks/useFilteredComponentDefinitions.ts Switches from loading to fetching semantics and simplifies selection logic to support previous-data behavior.
client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuComponentList.tsx Displays an inline spinner in the filter input while search is fetching.
client/src/pages/platform/workflow-editor/tests/WorkflowNodesPopoverMenuComponentList.test.tsx Adds UI tests for filter input rendering and spinner visibility.
client/src/pages/platform/workflow-editor/hooks/tests/useFilteredComponentDefinitions.test.ts Adds hook tests for trimmed filter behavior and previous-data behavior while fetching.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…use shared Spinner

- Add conditional pr-8 padding to Input when spinner is visible to
  prevent text/caret overlap
- Replace inline Loader2Icon with shared Spinner component for
  consistent loading indicators

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed for 'client'

Failed conditions
34.9% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

@ivicac ivicac requested a review from kresimir-coko February 22, 2026 11:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug] Workflow editor: component filter flickers and lacks loading indicator

1 participant