How to show spinner while getting records from server with @wire

Question

I'm getting data from server using @wire when the @api property changed. How to show spinner whenever getting data from server?

@api classId;

@tract isLoading = true;

@wire(wiredMethod, { classId: '$classId' })
wiredProperty({ data, error }) {
    this.isLoadig = false;
});

First time it is working fine on second time it is not showing spinner.

If I'm setter getter for classId it shows [Maximum call stack size exceeded] this error.

Answer 1

I do not see anything in your code which would ever set isLoading back to true. Perhaps something like this would work:

_privateClassId;
@track _isLoading = false;
@wire(wiredMethod, { classId: '$classId' })
wiredProperty({ data, error }) {
    this._isLoading = false;
});

set classId(value) {
    if (value) {
        _isLoading = true;
        this._privateClassId = value;
    }
}

@api
get classId() {
    return this._privateClassId;
}