show loading while waiting for options-CodePudding

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" >
      <div >
        <div>
          <div  style="width:4em; height:4em;" role="status">
            <span >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?

CodePudding user response：

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.