Tengo una lista desplegable que obtiene su información de un documento de Hojas de cálculo de Google. La cuestión es que toma un poco de tiempo obtener los datos, así que en lugar de esperar a que cambie el menú desplegable, quiero mostrar la carga en la lista desplegable.
Aquí está mi código:
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); }); }Cuando estoy esperando una página completa, usaría esto al final de una función.
document.getElementById("loading").remove();Con este 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>Y este CSS:
.loading { background-color:black; width: 100vw; height: 100vh; position:fixed; top:0; left:0; z-index:10000; }No sé cómo hacerlo con una lista desplegable, especialmente porque los contenidos provienen de una matriz.
Para mostrar la carga, al comienzo de la función, cree el nodo del icono de carga en 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()) )Después de agregar el nodo, puede eliminar el nodo de carga.
Para agregar elementos a la lista: simplemente puede agregar los elementos a un contenedor principal. En su código, ya crea los elementos de opción, por lo que todo lo que necesita agregar es una línea que agrega las opciones a un div de contenedor principal.
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"> </divSin embargo, como nota, si los elementos realmente tardan en cargarse, es posible que desee leer las promesas de JavaScript y las solicitudes asincrónicas, solo para no bloquear la interfaz de usuario mientras se crean los elementos.