Div правильно скрывается после вызова ajax, но снова появляется, когда я переключаюсь обратно на вкладку, она включена

Question

У меня есть страница с тремя разделами, и для перехода из одного раздела в другой вы используете вкладки.

На одной из вкладок у меня есть таблица, которая загружает данные через ajax. Я вставил значок загрузки, который правильно исчезает после загрузки данных, но если я переключаюсь на другую вкладку и возвращаюсь, то значок загрузки появляется снова, даже если данные таблицы уже присутствуют. Примерно через восемь секунд значок исчезнет. Кажется, что функция загрузчика вызывается каждый раз, когда вы возвращаетесь на вкладку, на которой она находится.

Это не конец света, потому что, когда загрузчик появляется снова, он находится внизу страницы, и вы не захотитене вижу, если вы не прокрутите вниз. С учетом вышесказанного мне интересно узнать, как можно предотвратить повторное появление загрузчика.

---

Фрагмент JS:

let _tvlCtrl;
var allterms = [];
var _secureTerms = [];
let tvlCats;
let tvlData;

export default class {
    constructor(){
        _tvlCtrl = this;
        _tvlCtrl.getTvlMainCategories();
        _tvlCtrl.loadSpinner();
    }

    openPage(_tvlid){
        _tvlCtrl.loadMainCategories()
    }

    loadMainCategories() {
        _tvlCtrl.getTvlResultsData().then(() => {

        jQuery("#maincategory").children().remove();

        // if...etc
        // element creating
            });
              // if...etc   
            });
            _tvlCtrl.populateTerms(allterms, mainCats);
        }
        _tvlCtrl.LoadDataGrid();
        });
    }

    async getTvlMainCategories(){
        return await jQuery.ajax({
            // etc
        });
    }

    async loadSpinner() {
        let $loading = $(".tvlLoader").hide();
        $(document)
        .ajaxStart(function() {
            $loading.show();
        })
        .ajaxStop(function() {
            $loading.hide();
        });
    }

// other code

Фрагмент HTML:

<div class="tvlLoader">
     <div class="loader__bars">
             <div class="rect1"></div>
             <div class="rect2"></div>
             <div class="rect3"></div>
             <div class="rect4"></div>
             <div class="rect5"></div>
       </div>
       <p>Loading, please wait...</p>
 </div>