Lazy loading combobox only when the filter length > 3

Hello, I am trying to build a combobox which gets the results from the an API but only when the minimum length of the filter string has reached. I have restricted the call to the WebAPI but the combo box starts showing the loading circle as soon as the user clicks inside the combobox making it look like its trying to search something. Is there a way to disable the loading image entirely or till the filter length reaches its minimum length. Heres my code.


        this.updateComplete.then(() => {
            this.comboBox.dataProvider = function (params, callback) {

                var xhr = new XMLHttpRequest();
                xhr.onload = function () {
                    const response = JSON.parse(xhr.responseText);
                    setTimeout(function () {
                        callback(response.result, response.size);
                    }, 1000);
                };

                if (this.filter.length > 3) {
                    var companySearchURL = 'DummyURL' + this.filter;
                    xhr.open('GET', companySearchURL, true);
                    xhr.send();
                }
            };

Hi Varun, you could invoke the callback with an empty result to dismiss the loading state:

if (this.filter.length > 3) {
  ...
} else {
  callback([]);
}

That worked out. Thanks a lot Tomi!