Как сделать прелоадер пока выполняется функция

Есть очень большой код и с множеством функций. При нажатие на кнопку, селектор, чекбокс - функция (на мобильных устройствах) выполняется в среднем 5 секунд. Я бы хотел чтоб в эти 5 секунд показывалась гифка загрузки. Как это можно реализовать? Код большой, и какой именно кусок нужно показать тут я не знаю. Там есть массив с картинками, которые скорей всего и грузит выполнение функций. Я пытался сделать это при помощи

var p = Promise.resolve([1,2,3]);
p.then(function(v) {
  console.log(v[0]); // 1
});

Но так и не разобрался как правильно это записать Помогите кому не жалко написать маленький пример.

Сам массив вот

 const arr = [
      // Категория 1, категория 2, href, src, text
       ["etika", "vikl", "images/etika/vikl/legrand_etika_672601.png", "images/etika/vikl/ii/legrand_etika_672601.png", "<b>Etika</b><br>Выключатель"],
       ["etika", "vikl", "images/etika/vikl/legrand_etika_672401.png", "images/etika/vikl/ii/legrand_etika_672401.png", "<b>Etika</b><br>Выключатель"],
    ....
 ];
    const collectValue = document.getElementById("display_avatar2").value;
    const mechTypeValue = document.getElementById("display_avatar6").value;
    
    const content_el1 = document.querySelector(".ere");
    const content_el2 = document.querySelector(".ere2");
    const content_el3 = document.querySelector(".ere3"); 
    const content_el4 = document.querySelector(".ere4");
    const content_el5 = document.querySelector(".ere5");

    content_el1.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <a href="${href}" > <div class="varic2">
            <img class="notact2" src="${src}" />
          <div>${text}</div>
        </div></a>
      `).join("");
    

    content_el2.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <a href="${href}"> <div class="varic2">
            <img class="notact2" src="${src}" />
          <div>${text}</div>
        </div></a>
      `).join("");
      
    content_el3.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <a href="${href}"> <div class="varic2">
            <img class="notact2" src="${src}" />
          <div>${text}</div>
        </div></a>
      `).join("");
      
      content_el4.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <a href="${href}"> <div class="varic2">
            <img class="notact2" src="${src}" />
          <div>${text}</div>
        </div></a>
      `).join("");
      
      
      content_el5.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
       <a href="${href}">  <div class="varic2">
            <img class="notact2" src="${src}" />
          <div>${text}</div>
        </div> </a>
      `)
.join("");