在等待选项时显示加载

Question

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?

Answer 1

To display loading, at the start of the function, create the loading icon node in javascript.

 const loading = document.createElement("div") function inner(){ const inner = document.createElement("div") inner.classList.add("spinner-border text-light") inner.style = "width:4em; height:4em" return inner } function subInner (){ const subInner = document.createElement("div") const text = document.createElement("div") text.textContent = "Loading..." subInner.appendChild(inner()) subInner.appendChild(text) return subInner } loading.id = loading loading.classList.add = "loading pt-40" loading.appendChild( document.createElement("div").classList.add("d-flex justify-content-center").appendChild(subInner()) )

After the node are appending you can remove the loading node.

To append items to list: You can just append the elements to a parent container. In your code you already create the option elements, so all you need to add is one line appending the options to a parent container div.

 const parent = document.getElementById("dropdown-list") arrayValues.forEach(function(r){ var option = document.createElement("option"); option.textContent = r; el.appendChild(option); //add to a parent container parent.appendChild(el) });

 <div id="dropdown-list"> </div

As a note though, if it really takes time for the items to load, you may want to read up on javascript promises and asynchronous requests, just so don't block the user interface while the elements are created.