show loading while waiting for options

I have an dropdown list that gets it’s info from a Google Sheets doc. The thing is it takes a little while to fetch the data so rather than waiting for the dropdown to change, I want to show loading in the dropdown list.

Here’s my code:

function showMediaDropdownMenuOptions(el, arrayOfArrays, index) {
    var serviceTypeElement = document.getElementById("service-type").value;
    var currentlyAdded = []
    el.innerHTML = '';
    var filteredArray = arrayOfArrays.filter(function(r) {return r[17].includes(serviceTypeElement)})
    var result = filteredArray.flatMap(({ 0: key, 17: values }) => values
            .split(', ')
            .map(value => [key, value])
        );
        const mappedArray = result.map(item => item[0].toString().replace(/s*,s*/g, ",").split(',').sort())
        const sets = new Set([].concat(...mappedArray))
        const arrayValues = Array.from(sets)
    var option = document.createElement("option");
    arrayValues.forEach(function(r){
        var option = document.createElement("option");
        option.textContent = r;
        el.appendChild(option);
    });
  }

When I’m waiting for a whole page it’d use this at the end of a function.

document.getElementById("loading").remove();

With this html:

 <div id="loading" class="loading pt-40">
      <div class="d-flex justify-content-center">
        <div>
          <div class="spinner-border text-light" style="width:4em; height:4em;" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <div>Loading...</div>
        </div>
      </div>
    </div>

And this css:

.loading {
  background-color:black;
  width: 100vw;
  height: 100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:10000;
}

I don’t know how to do it with a dropdown list especially as the contents come from an array?