feat(frontend): enable optimistic updates in Transaction Filter Sidebar

[Thosine-01]

feat(frontend): Enable optimistic updates in Transaction Filter Sidebar

Closes #792

---

Summary

This PR implements fully optimistic filter state in the Transaction Filter Sidebar, making every filter interaction feel instant — the UI updates immediately on user input, with visual feedback while URL/server state catches up.

---

What changed

hooks/useTransactionFilters.ts (new)

• Dedicated hook owning all filter state via paymentHistoryFiltersReducer
• Two-tier optimistic strategy:
  • Search → instant draft update + 350ms debounced URL push (searchSyncPending flag)
  • All other filters → instant draft update + immediate URL push inside useTransition (isFilterPending flag)
• onClearFilter("search") cancels any in-flight debounce immediately
• onClearAll resets all state and cancels pending debounce in one call
• Initialises from URL search params so deep-links and page refreshes are respected

components/TransactionFilterSidebar.tsx (updated)

• Accepts new optional isFilterPending prop (fully backwards compatible)
• Animated sweep progress bar at top of sidebar during any sync
• Pulsing "Applying" badge in the header
• Per-field spinner next to labels with pending values
• Dashed border on inputs whose draft value is ahead of the committed URL
• Animated clear × button on the search field
• aria-pressed on asset toggle buttons, aria-busy on all inputs, aria-live on hint text
• useId() for stable duplicate-free IDs across desktop/mobile renders

app/(authenticated)/payment-history/page.tsx (updated)

• Replaced ~60 lines of duplicated manual useReducer + debounce useEffect + filter handlers with a single useTransactionFilters call
• Passes isFilterPending to the sidebar and dims the results table (opacity-60 pointer-events-none) during transitions
• Fetch still runs against committed URL searchParams so the server always receives consistent filter values

components/TransactionFilterSidebar.test.tsx (updated)

• 23 tests covering: rendering, all optimistic interactions, searchSyncPending visual states, isFilterPending visual states, ARIA attributes, mobile drawer

hooks/useTransactionFilters.test.ts (new)

• 18 tests covering: initialisation from URL params, debounce timing, URL push timing, rapid keystroke debouncing, clear-filter cancels debounce, clear-all resets everything

---

Checklist

• Optimistic draft state updates synchronously on every interaction
• Search debounced at 350ms; all other filters flush immediately via useTransition
• Visual feedback: progress bar, pending badge, per-field spinners, dashed borders
• Full a11y: aria-busy, aria-pressed, aria-live, aria-label on all interactive elements
• Mobile drawer works identically to desktop panel
• No new dependencies added
• No breaking changes (new props are optional with safe defaults)
• 41 tests passing

[vercel]

@Thosine-01 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Thosine-01 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits