hotel-manage-stack/hk-planner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Debounce date input loads to prevent mid-type API calls

Browse source 
Typing a date manually (e.g. "21") fires onChange on each keystroke,
so "2" would trigger a load for the 2nd before "21" was complete.
Added a 600ms debounce on the week-start and since-date inputs so the
load only fires after the user stops typing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-22 12:59:26 +00:00
parent 0b63543e1f
commit f1ba176195
4 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/pages/Planner.tsx
View file

@ -338,7 +338,7 @@ export function Planner() {
<input
type="date"
value={displayWeekStart}
onChange={e => { if (e.target.value) { setWeekStart(e.target.value); stampLastReviewed(); loadAll(true, e.target.value) } }}
onChange={e => { if (e.target.value) { const v = e.target.value; setWeekStart(v); stampLastReviewed(); debounce('weekStart', () => loadAll(true, v), 600) } }}
style={{ border: '1px solid var(--card-border)', borderRadius: '6px', padding: '0.35rem 0.5rem', fontSize: '0.82rem', color: 'var(--text-dark)' }}
/>
<div style={{ width: '1px', height: '24px', background: 'var(--card-border)' }} />
@ -348,7 +348,7 @@ export function Planner() {
<input
type="date"
value={lastViewed}
onChange={e => { if (e.target.value) { setLastViewed(e.target.value); loadAll(true, undefined, e.target.value) } }}
onChange={e => { if (e.target.value) { const v = e.target.value; setLastViewed(v); debounce('lastViewed', () => loadAll(true, undefined, v), 600) } }}
style={{ border: '1px solid var(--card-border)', borderRadius: '6px', padding: '0.3rem 0.5rem', fontSize: '0.78rem', color: 'var(--text-dark)' }}
/>
</label>