Toggling is-loading of an LWC search input?

Question

The <lightning-input type="search"></lightning-input> has the is-loading attribute that puts a little spinner in it 'when data is loading'.

For my search input, I call out to Apex with the search term and return record that match or partially match the search term with their name. However, I cannot find a way to turn this is-loading on and off. I am not seeing how you dynamically toggle this attribute.

I am wanting to do something like:

this.isLoading = true;
searchObjects({objectType: this.objectType, phrase: searchPhrase})
            .then(result => {
                this.results= JSON.parse(result);
                this.isLoading = false;

            }).catch(error => {
                this.isLoading = false;
                //show error
            });

Where isLoading will toggle the is-loading attribute of the input. Is this possible?

Answer 1

You just need to set the attribute, then you can toggle it. Example.

<lightning-input label="Search" is-loading={isLoading} type="search"></lightning-input>

...

@track isLoading = false;

...

this.isLoading = true;
searchObjects({objectType: this.objectType, phrase: searchPhrase})
            .then(result => {
                this.results = result;
            }).catch(error => {
                //show error
            }).finally(() => this.isLoading = false);