admin/HighCostDrugsDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement debounced inputs for filter performance (Task 5.2)

Browse Source 
- Wrap date inputs with rx.debounce_input() (300ms timeout)
- Wrap dropdown search inputs with rx.debounce_input() (300ms timeout)
- Prevents excessive filter/chart updates during user input
- Satisfies "instant (debounced) updates" completion criterion
This commit is contained in:
Andrew Charlwood
2026-02-04 19:25:57 +00:00
parent f863e79299
commit b93af40ac4
2 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pathways_app/app_v2.py
+38 -25
View File
@@ -1029,6 +1029,8 @@ def date_range_picker(
"""
Date range picker with enable/disable checkbox.
Uses debounced inputs (300ms) to prevent excessive filter updates.
Args:
label: Label for the date range (e.g., "Initiated", "Last Seen")
enabled: Whether the filter is active
@@ -1056,21 +1058,24 @@ def date_range_picker(
align="center",
spacing="2",
),
# Date inputs
# Date inputs (debounced 300ms)
rx.hstack(
rx.vstack(
rx.text(
"From",
**text_caption(),
),
rx.input(
type="date",
value=from_value,
on_change=on_from_change,
disabled=~enabled,
**input_style(),
width="140px",
opacity=rx.cond(enabled, "1", "0.5"),
rx.debounce_input(
rx.input(
type="date",
value=from_value,
on_change=on_from_change,
disabled=~enabled,
**input_style(),
width="140px",
opacity=rx.cond(enabled, "1", "0.5"),
),
debounce_timeout=300,
),
spacing="1",
align="start",
@@ -1080,14 +1085,17 @@ def date_range_picker(
"To",
**text_caption(),
),
rx.input(
type="date",
value=to_value,
on_change=on_to_change,
disabled=~enabled,
**input_style(),
width="140px",
opacity=rx.cond(enabled, "1", "0.5"),
rx.debounce_input(
rx.input(
type="date",
value=to_value,
on_change=on_to_change,
disabled=~enabled,
**input_style(),
width="140px",
opacity=rx.cond(enabled, "1", "0.5"),
),
debounce_timeout=300,
),
spacing="1",
align="start",
@@ -1116,6 +1124,8 @@ def searchable_dropdown(
"""
Searchable multi-select dropdown component.
Uses debounced search input (300ms) for smooth filtering.
Args:
label: Label for the dropdown
selection_text: Text showing selection count
@@ -1170,16 +1180,19 @@ def searchable_dropdown(
is_open,
rx.box(
rx.vstack(
# Search input
# Search input (debounced 300ms)
rx.hstack(
rx.icon("search", size=14, color=Colors.SLATE_500),
rx.input(
placeholder="Search...",
value=search_value,
on_change=on_search_change,
variant="soft",
size="2",
width="100%",
rx.debounce_input(
rx.input(
placeholder="Search...",
value=search_value,
on_change=on_search_change,
variant="soft",
size="2",
width="100%",
),
debounce_timeout=300,
),
spacing="2",
align="center",