Debounce search/filter inputs (MarketTypeInput, scan & acquisitions tables) #12

Open
opened 2026-07-05 16:27:52 +02:00 by Sirttas · 0 comments
Owner

Problem

Several search/filter text inputs run their work on every keystroke, with no debouncing:

  • MarketTypeInput.vue — the watchEffect (src/market/type/MarketTypeInput.vue:76) calls searchMarketTypes() on every keystroke, firing a marketApi.searchTypes request per character (the only guard is the search.length < 3 minimum-length check). This spams the backend/ESI while typing.
  • ScanResultTable.vue — the filter ref (src/market/scan/ScanResultTable.vue:55) feeds a heavy useSort computed (:71) that re-filters/re-maps the full result list on every keystroke.
  • AcquisitionResultTable.vue — same pattern: the filter ref (src/market/acquisition/AcquisitionResultTable.vue:70) drives a computed (:72) recomputed on every keystroke.

Proposal

Add debouncing using VueUse (already a dependency — @vueuse/core):

  • MarketTypeInput.vue: debounce the value driving the search (e.g. refDebounced on the search term, or wrap searchMarketTypes in useDebounceFn) so the API is only hit after typing pauses. Suggested ~300ms.
  • ScanResultTable.vue / AcquisitionResultTable.vue: debounce the filter value feeding the computed so the (potentially large) list isn't re-filtered on every keystroke.

Notes

  • No debounce/throttle currently exists anywhere in the codebase.
  • Keep the existing length < 3 gate on the type search.
## Problem Several search/filter text inputs run their work on every keystroke, with no debouncing: - **`MarketTypeInput.vue`** — the `watchEffect` (`src/market/type/MarketTypeInput.vue:76`) calls `searchMarketTypes()` on every keystroke, firing a `marketApi.searchTypes` request per character (the only guard is the `search.length < 3` minimum-length check). This spams the backend/ESI while typing. - **`ScanResultTable.vue`** — the `filter` ref (`src/market/scan/ScanResultTable.vue:55`) feeds a heavy `useSort` computed (`:71`) that re-filters/re-maps the full result list on every keystroke. - **`AcquisitionResultTable.vue`** — same pattern: the `filter` ref (`src/market/acquisition/AcquisitionResultTable.vue:70`) drives a computed (`:72`) recomputed on every keystroke. ## Proposal Add debouncing using VueUse (already a dependency — `@vueuse/core`): - `MarketTypeInput.vue`: debounce the value driving the search (e.g. `refDebounced` on the search term, or wrap `searchMarketTypes` in `useDebounceFn`) so the API is only hit after typing pauses. Suggested ~300ms. - `ScanResultTable.vue` / `AcquisitionResultTable.vue`: debounce the `filter` value feeding the computed so the (potentially large) list isn't re-filtered on every keystroke. ## Notes - No `debounce`/`throttle` currently exists anywhere in the codebase. - Keep the existing `length < 3` gate on the type search.
Sirttas added the
Status
To Refine
label 2026-07-09 19:30:26 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: eveal/gemory#12