feat: add pause button to transaction list for stopping live updates

[hartym]

Summary

Add a pause/resume button to the transaction list toolbar that allows users to temporarily stop the automatic polling for new transactions. This lets users examine current data without it being refreshed every 10 seconds, which is useful when investigating specific transactions or comparing data.

Context

The transaction list page uses React Query with a 10-second refetchInterval to poll for new transactions. While this provides real-time visibility, it can be disruptive when a user needs to:

• Analyze a specific set of transactions without the list changing
• Compare transaction details side-by-side
• Read through transaction data without interruption

React Query's enabled option provides a clean mechanism to pause/resume polling without losing cached data.

Architecture

graph LR
    A[PauseButton] -->|toggles| B[isPaused state]
    B -->|controls| C[useTransactionsListQuery]
    C -->|enabled=!isPaused| D[React Query refetchInterval]
    D -->|when enabled| E[GET /api/transactions]

Loading

Key files:

• harp_apps/dashboard/frontend/src/Domain/Transactions/useTransactionsListQuery.ts - Query hook
• harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListPage.tsx - Page component
• harp_apps/dashboard/frontend/src/Pages/Transactions/Components/Buttons.tsx - Button components

Input

• User clicks pause button → isPaused state toggles to true
• User clicks play button → isPaused state toggles to false

Output and Testing Scenarios

Expected Output:

• Pause button appears in toolbar next to refresh button
• When paused: polling stops, button shows play icon
• When resumed: polling resumes at 10s interval, button shows pause icon
• Cached data remains visible while paused

Testing Scenarios:

1. Happy Path: User clicks pause → polling stops → data remains visible → clicks play → polling resumes
2. Page navigation: User pauses → navigates away → returns → state resets to unpaused (default)
3. Manual refresh while paused: User can still use refresh button to manually fetch while paused

Possible Implementation

1. Add enabled parameter to useTransactionsListQuery hook
2. Add isPaused state in TransactionListPage
3. Create PauseButton component in Buttons.tsx with play/pause icon toggle
4. Add button to toolbar alongside existing RefreshButton

The implementation follows existing patterns in the codebase - useTransactionsDetailQuery already uses conditional enabled for reference.