perf(frontend): make transfer search and filtering deterministic at scale

[arisu6804]

Problem

Client filtering and request fan-out become slow and race-prone as transfer history grows.

Objective

Deliver a production-quality improvement to transfer search, filters, and result loading that creates measurable value for correctness, security, reliability, performance, or maintainability.

Implementation scope

• Debounce and cancel obsolete queries; cap results; define stable filter and sort semantics; keep actor scope in every request.

Acceptance criteria

• Stale responses cannot overwrite current filters; request volume is bounded; large histories remain responsive.

Required validation

• Race, cancellation, scope, pagination, and performance tests.
• Existing tests and CI remain passing.
• Add regression coverage for the original failure mode.
• Do not weaken, delete, or skip unrelated tests to obtain a green build.

PR quality bar

• Keep the PR focused and explain design tradeoffs, compatibility impact, and test evidence.
• Avoid typo-only, documentation-only, cosmetic-only, or unrelated refactor submissions.

Out of scope

• Broad rewrites not required by the acceptance criteria.
• Changes to unrelated services, contracts, or user flows.

[Rodrigoue9]

Technical Implementation Proposal

Hey @RemitFlow team, I would like to resolve this issue for the GrantFox Third Campaign. Here is the implementation plan:

1. Problem & Objective

Rapid typing in search and filter controls creates request fan-out and race conditions where slower, obsolete responses can resolve after newer queries, rendering outdated transfer results.

2. Implementation Scope

• Request Cancellation via AbortController:
  • Maintain an active AbortController reference for in-flight search requests.
  • Whenever search criteria change, immediately abort pending HTTP requests so obsolete responses are discarded at the network layer and cannot overwrite fresher state.
• Search Debouncing:
  • Integrate 300ms debounce on text search inputs to throttle query volume.
• Strict Actor Scope & Deterministic Sorting:
  • Ensure every search query payload explicitly binds the active user wallet/actor scope to prevent race condition cross-talk.
  • Apply deterministic sorting on received results using (timestamp, id) to guarantee stable rendering.
• Result Bounding / Windowing:
  • Cap query result volume and employ virtualized or capped list rendering to prevent DOM churn on large transfer histories.

3. Validation & Testing

• Unit and integration tests:
  • Race condition test: dispatch Query A (slow 300ms) followed by Query B (fast 50ms); verify Query A is aborted and only Query B results populate the view.
  • Debounce test: verify keystroke bursts fire only a single API request after 300ms.
  • Scope verification: assert actor address is included in all query parameters.
  • Performance benchmark on 500+ transfers to verify frame rate and memory stability.

Ready to implement upon assignment!

[shobhamerabacha-star]

Hi there,

I would like to resolve this issue. Here is my proposed execution plan:

• Implementation: Deliver perf(frontend): make transfer search and filtering deterministic at scale with proper loading/error states and clean component architecture.
• Testing: Add component unit tests verifying user interactions and rendering states.

Happy to pick this up today—please assign to me!