Currently, when users change the proportion, then the filtering step is directly initiated. Find a way to decouple this, so when the user changes the proportion filter, the changed values are shown, but the filtering is only performed after a small time period.
A part of the solution could be
function debounce(func: (proportion: number) => void, delayInMs: number) {
let timeoutId: number | undefined;
return (proportion: number) => {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = window.setTimeout(() => {
func(proportion);
}, delayInMs);
};
}
Currently, when users change the proportion, then the filtering step is directly initiated. Find a way to decouple this, so when the user changes the proportion filter, the changed values are shown, but the filtering is only performed after a small time period.
A part of the solution could be