feat: support loading state in combobox and menu

components/combobox/apiExamples/loading.html

@@ -0,0 +1,6 @@
+<auro-combobox id="loadingExample">
+  <span slot="label">Please select a preference</span>
+  <auro-menu id="loadingExampleComboboxMenu">
+    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+  </auro-menu>
+</auro-combobox>

components/combobox/apiExamples/loading.js

@@ -0,0 +1,34 @@
+export function auroMenuLoadingExample() {
+  const combobox = document.querySelector("#loadingExample");
+  const menu = document.querySelector("#loadingExampleComboboxMenu");
+  const emptyMenu = () => {
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
+  }
+  const fillMenu = () => {
+    menu.innerHTML += `
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    `;
+  }
+
+  const load = () => {
+    clearTimeout(load.id);
+    emptyMenu();
+    menu.setAttribute('loading', 'loading');
+    load.id = setTimeout(() => {
+      menu.removeAttribute('loading');
+      fillMenu();
+    }, 1000);
+
+  }
+  combobox.addEventListener("input", (e) => {
+    if (e.target.value) {
+      load();
+    }
+  });
+}

components/combobox/demo/api.html

@@ -45,6 +45,7 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/auro-dialog__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"

components/combobox/demo/api.js

@@ -4,6 +4,7 @@ import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
 import { inDialogExample } from '../apiExamples/inDialog.js';
+import { auroMenuLoadingExample } from '../apiExamples/loading.js';
 
 
 import { AuroCombobox } from '../src/auro-combobox.js';
@@ -20,6 +21,7 @@ export function initExamples(initCount) {
     valueExample();
     focusExample();
     inDialogExample();
+    auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

components/combobox/demo/api.md

@@ -673,6 +673,76 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Loading<a name="loading"></a>
+While the content in menu is loading, you can either does not show anytning or show a loading placeholder
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/loading.html -->
+  <auro-combobox id="loadingExample">
+    <span slot="label">Please select a preference</span>
+    <auro-menu id="loadingExampleComboboxMenu">
+      <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.js -->
+
+```js
+export function auroMenuLoadingExample() {
+  const combobox = document.querySelector("#loadingExample");
+  const menu = document.querySelector("#loadingExampleComboboxMenu");
+  const emptyMenu = () => {
+    const menuoptions = menu.querySelectorAll('auro-menuoption');
+    menuoptions.forEach(mo => menu.removeChild(mo));
+  }
+  const fillMenu = () => {
+    menu.innerHTML += `
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    `;
+  }
+
+  const load = () => {
+    clearTimeout(load.id);
+    emptyMenu();
+    menu.setAttribute('loading', 'loading');
+    load.id = setTimeout(() => {
+      menu.removeAttribute('loading');
+      fillMenu();
+    }, 1000);
+
+  }
+  combobox.addEventListener("input", (e) => {
+    if (e.target.value) {
+      load();
+    }
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
+
+```html
+<auro-combobox id="loadingExample">
+  <span slot="label">Please select a preference</span>
+  <auro-menu id="loadingExampleComboboxMenu">
+    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### in Dialog
 
 The component can be in a dialog.