LWC spinner removes filter values

Question

I have this page that displays a list of clients which can be filtered based on 4 fields. Because data retrieval took quite a while, so I have decided to add a spinner. However it seems that now the filter values are being removed after the data retrieval operation is done.

Here is a sample of my code:

    <div class="slds-section">
        <h3 class="slds-section__title">
            <button aria-controls="expando-unique-id" aria-expanded="false" class="slds-button slds-section__title-action" onclick={triggerFilters}>
            <svg class="slds-section__title-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#switch"></use>
            </svg>
            <span class="slds-truncate" title="Section Title">Filter</span>
            </button>
        </h3>
        <div aria-hidden="true" class="slds-section__content" id="expando-unique-id">
            <div class="filters-container">
                <div if:true={industryOptions} class="industry-filter-width">
                    <lightning-dual-listbox 
                        name="induesties"
                        label="Select Industry"
                        source-label="Available"
                        selected-label="Selected"
                        field-level-help="Select your preferred industry"
                        options={industryOptions}
                        data-id="industry-filter"
                        disable-reordering="true"
                        onchange={handleIndustryChange}>
                    </lightning-dual-listbox>
                </div>
                <div if:true={subIndustryOptions} class="industry-filter-width slds-m-horizontal_x-small">
                    <lightning-dual-listbox 
                        name="subInduesties"
                        label="Select Sub-Industry"
                        source-label="Available"
                        selected-label="Selected"
                        field-level-help="Select your preferred sub-industry"
                        options={subIndustryOptions}
                        data-id="sub-industry-filter"
                        disable-reordering="true">
                    </lightning-dual-listbox>
                </div>
                <div if:true={branchOptions} class="branch-filter-width slds-m-horizontal_x-small">
                    <lightning-dual-listbox 
                        name="branches"
                        label="Select Branch"
                        source-label="Available"
                        selected-label="Selected"
                        field-level-help="Select your preferred branch"
                        options={branchOptions}
                        data-id="branch-filter"
                        disable-reordering="true">
                    </lightning-dual-listbox>
                </div>
                <div if:true={managerOptions} class="managers-filter-width">
                    <lightning-dual-listbox 
                        name="managers"
                        label="Select Relationship Manager"
                        source-label="Available"
                        selected-label="Selected"
                        field-level-help="Select your preferred manager"
                        options={managerOptions}
                        data-id="manager-filter"
                        disable-reordering="true">
                    </lightning-dual-listbox>
                </div>
                <div class="buttons-container slds-m-horizontal_small" if:true={filtersFetched}>
                    <div>
                        <button class="slds-button slds-button_brand redirect-button slds-m-vertical_x-small" onclick={filterList}>Apply filters</button>
                    </div>
                    <div>
                        <button class="slds-button slds-button_brand redirect-button slds-m-vertical_x-small" onclick={clearFilters}>Clear filters</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

filterList(){
    this.loaded = false;
    var industryFilter = this.template.querySelector('[data-id=industry-filter]').value;
    var subIndustryFilter = this.template.querySelector('[data-id=sub-industry-filter]').value;
    var branchFilter = this.template.querySelector('[data-id=branch-filter]').value;
    var managerFilter = this.template.querySelector('[data-id=manager-filter]').value;
    console.log(industryFilter, subIndustryFilter, branchFilter, managerFilter);
    var filtersWrapper = {
        industies: industryFilter,
        subIndustries: subIndustryFilter,
        branches: branchFilter,
        managers: managerFilter
    };

    getClients({
        filters: JSON.stringify(filtersWrapper)
    }).then((result) => {
        var data = JSON.parse(result);
        console.log(data);
        if(data){
            this.clients = data.clientData;
            this.productTotals = data.totalsForProduct;
            this.loaded = true;
        }
    }).catch(error => {
        console.error('error retrieving filtered data');
    });
}

If I comment out the 2 lines of code that control the spinner variable(this.loaded) then everything seems to work just fine.

Any idea why this might happen?