Add throttling of autofill API calls
This commit is contained in:
parent
fa31ffc198
commit
b5131d12a3
@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import './autofillDropdown.css';
|
||||
|
||||
import { apiGet } from '../../../apiHelpers';
|
||||
import { useThrottledValue } from '../../../hooks/useThrottledValue';
|
||||
|
||||
interface AutofillDropdownProps {
|
||||
fieldName: string;
|
||||
@ -21,6 +22,9 @@ interface AutofillOption {
|
||||
export const AutofillDropdown: React.FC<AutofillDropdownProps> = props => {
|
||||
const [options, setOptions] = useState<AutofillOption[]>(null);
|
||||
|
||||
// use both throttled and debounced field value as trigger for update
|
||||
const throttledFieldValue = useThrottledValue(props.fieldValue, 1000);
|
||||
|
||||
useEffect(() => {
|
||||
const doAsync = async () => {
|
||||
if (!props.editing || props.fieldValue === '') return setOptions(null);
|
||||
@ -34,7 +38,7 @@ export const AutofillDropdown: React.FC<AutofillDropdownProps> = props => {
|
||||
};
|
||||
|
||||
doAsync();
|
||||
}, [props.editing, props.fieldName, props.fieldValue]);
|
||||
}, [props.editing, props.fieldName, throttledFieldValue]);
|
||||
|
||||
if (!props.editing || options == undefined) return null;
|
||||
|
||||
|
22
app/src/frontend/hooks/useThrottledValue.ts
Normal file
22
app/src/frontend/hooks/useThrottledValue.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export function useThrottledValue<V>(value: V, delay: number): V {
|
||||
const [throttledValue, setThrottledValue] = useState(value);
|
||||
let lastUpdated = useRef(Date.now());
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if(Date.now() - lastUpdated.current >= delay) {
|
||||
setThrottledValue(value);
|
||||
console.log('Updating to', value);
|
||||
lastUpdated.current = Date.now();
|
||||
}
|
||||
}, delay - (Date.now() - lastUpdated.current));
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [delay, value]);
|
||||
|
||||
return throttledValue;
|
||||
}
|
Loading…
Reference in New Issue
Block a user