sortDebounce for AutoGrid?

const ObservableOrderBrowserCallable: ListService<T> & CountService<T> = useMemo(() => {
    const debouncedList = debounce((resolve: (value: (T[] | PromiseLike<T[]>)) => void, pageable: Pageable, filter: FilterUnion | undefined, init?: EndpointRequestInit) => {
        service.list(pageable, filter).then((response) => {
            resolve(response);
        });
    },100);
  
    const countDebounced = debounce((resolve: (value: (number | PromiseLike<number>)) => void, filter: FilterUnion | undefined, init?: EndpointRequestInit) => {
        service.count(filter).then((response) => {
            resolve(response);
        });
    },100);
  
    return ({
        ...props.autoGridProps.service,
        list(pageable: Pageable, filter: FilterUnion | undefined, init?: EndpointRequestInit) {
            return new Promise<T[]>((resolve, reject) => {
                debouncedList(resolve, pageable, filter, init);
            });
        },
        count(filter: FilterUnion | undefined, init?: EndpointRequestInit) {
            return new Promise<number>((resolve, reject) => {
                countDebounced(resolve, filter, init);
            });
        }
    })
  }, [service]);

I tried to add debounce to the AutoGrid with Observable Order. This has issue with empty rows being showed up on the screen.

I want Grid to not make ajax call if user is just trying to do multiple sorts or trying to do Desc sort on a column. So first click makes asc call and later one will do desc call.

Currently as soon as I sort, it makes call.