fix(native-filters): improve time range filter performance (#15295)

* fix time range default value

* defer time filter rendering to inView event

* avoid double fetching of time ranges

* lint

* move set to resolved promise
This commit is contained in:
Ville Brofeldt
2021-06-22 14:38:16 +03:00
committed by GitHub
parent 048609d120
commit cef3dc0b02
4 changed files with 24 additions and 14 deletions

View File

@@ -187,6 +187,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
const [show, setShow] = useState<boolean>(false);
const guessedFrame = useMemo(() => guessFrame(value), [value]);
const [frame, setFrame] = useState<FrameType>(guessedFrame);
const [lastFetchedTimeRange, setLastFetchedTimeRange] = useState(value);
const [timeRangeValue, setTimeRangeValue] = useState(value);
const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
const [evalResponse, setEvalResponse] = useState<string>(value);
@@ -223,20 +224,26 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
}
setValidTimeRange(true);
}
setLastFetchedTimeRange(value);
});
}, [value]);
useDebouncedEffect(
() => {
fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => {
if (error) {
setEvalResponse(error || '');
setValidTimeRange(false);
} else {
setEvalResponse(value || '');
setValidTimeRange(true);
}
});
if (lastFetchedTimeRange !== timeRangeValue) {
fetchTimeRange(timeRangeValue, endpoints).then(
({ value: actualRange, error }) => {
if (error) {
setEvalResponse(error || '');
setValidTimeRange(false);
} else {
setEvalResponse(actualRange || '');
setValidTimeRange(true);
}
setLastFetchedTimeRange(timeRangeValue);
},
);
}
},
SLOW_DEBOUNCE,
[timeRangeValue],