fix: add loader part and style loading items state

Fixes #710

demo/combo-box-basic-demos.html

@@ -92,7 +92,9 @@ <h3>Lazy Loading</h3>
               var xhr = new XMLHttpRequest();
               xhr.onload = function() {
                 const response = JSON.parse(xhr.responseText);
-                callback(response.result, response.size);
+                setTimeout(() => {
+                  callback(response.result, response.size);
+                }, 2000);
               };
               var index = params.page * params.pageSize;
               const url = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=' + index +

src/vaadin-combo-box-dropdown-wrapper.html

@@ -156,7 +156,7 @@
       }
 
       static get observers() {
-        return ['_selectorChanged(_selector)', '_loadingChanged(loading)', '_openedChanged(opened, _items)'];
+        return ['_selectorChanged(_selector)', '_loadingChanged(loading)', '_openedChanged(opened, _items, loading)'];
       }
 
       _fireTouchAction(sourceEvent) {
@@ -169,10 +169,10 @@
         return opened ? items : [];
       }
 
-      _openedChanged(opened, items) {
+      _openedChanged(opened, items, loading) {
         // Do not attach if no items
         // Do not dettach if opened but user types an invalid search
-        this.$.dropdown.opened = !!(opened && (this.$.dropdown.opened || items && items.length));
+        this.$.dropdown.opened = !!(opened && (loading || this.$.dropdown.opened || items && items.length));
       }
 
       ready() {

src/vaadin-combo-box-dropdown.html

@@ -50,6 +50,14 @@
       static get is() {
         return 'vaadin-combo-box-overlay';
       }
+
+      ready() {
+        super.ready();
+        const loader = document.createElement('div');
+        loader.setAttribute('part', 'loader');
+        const content = this.shadowRoot.querySelector(['[part~="content"]']);
+        content.parentNode.insertBefore(loader, content);
+      }
     }
 
     customElements.define(ComboBoxOverlayElement.is, ComboBoxOverlayElement);

test/lazy-loading.html

@@ -484,6 +484,8 @@
           it('should select value matching selectedItem when items are loading', () => {
             comboBox.selectedItem = 'item 0';
             comboBox.opened = true;
+            comboBox.$.overlay.updateViewportBoundaries();
+            comboBox.$.overlay.ensureItemsRendered();
             expect(comboBox.value).to.equal('item 0');
             const selectedRenderedItemElements = Array.from(
               comboBox.$.overlay._selector.querySelectorAll('vaadin-combo-box-item')
@@ -529,6 +531,8 @@
           it('should select value matching selectedItem when items are loading', () => {
             comboBox.selectedItem = {id: 0, value: 'value 0', label: 'label 0'};
             comboBox.opened = true;
+            comboBox.$.overlay.updateViewportBoundaries();
+            comboBox.$.overlay.ensureItemsRendered();
             expect(comboBox.value).to.equal('value 0');
             const selectedRenderedItemElements = Array.from(
               comboBox.$.overlay._selector.querySelectorAll('vaadin-combo-box-item')

test/vaadin-combo-box-dropdown.html

@@ -39,6 +39,21 @@
         expect(window.getComputedStyle(overlay).display).not.to.eql('none');
       });
 
+      describe('loader part', () => {
+        let loader;
+        beforeEach(() => loader = overlay.shadowRoot.querySelector('[part~="loader"]'));
+        it('should be present in overlay', () => {
+          expect(loader).to.not.be.null;
+        });
+
+        it('should be in overlay part', () => {
+          expect(loader.parentNode.getAttribute('part')).to.include('overlay');
+        });
+
+        it('should be before content part', () => {
+          expect(loader.nextElementSibling.getAttribute('part')).to.include('content');
+        });
+      });
     });
   </script>
 

theme/lumo/vaadin-combo-box-dropdown-styles.html

@@ -26,6 +26,63 @@
         --iron-list-items-container_-_border-style: solid;
         --iron-list-items-container_-_border-color: transparent;
       }
+
+      /* Loading state */
+
+      /* When items are empty, the sinner needs some room */
+      :host(:not([closing])) [part~="content"] {
+        min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
+      }
+
+      [part~="overlay"] {
+        position: relative;
+      }
+
+      :host([loading]) [part~="loader"] {
+        box-sizing: border-box;
+        width: var(--lumo-icon-size-s);
+        height: var(--lumo-icon-size-s);
+        position: absolute;
+        z-index: 1;
+        left: var(--lumo-space-s);
+        right: var(--lumo-space-s);
+        top: var(--lumo-space-s);
+        margin-left: auto;
+        margin-inline-start: auto;
+        margin-inline-end: 0;
+        border: 2px solid transparent;
+        border-color:
+          var(--lumo-primary-color-50pct)
+          var(--lumo-primary-color-50pct)
+          var(--lumo-primary-color)
+          var(--lumo-primary-color);
+        border-radius: calc(0.5 * var(--lumo-icon-size-s));
+        opacity: 0;
+        animation:
+          1s linear infinite lumo-combo-box-loader-rotate,
+          .3s .1s lumo-combo-box-loader-fade-in both;
+        pointer-events: none;
+      }
+
+      @keyframes lumo-combo-box-loader-fade-in {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes lumo-combo-box-loader-rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(360deg);
+        }
+      }
     </style>
   </template>
 </dom-module>

theme/material/vaadin-combo-box-dropdown-styles.html

@@ -13,13 +13,82 @@
       }
 
       [part="overlay"] {
+        position: relative;
+        overflow: visible;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
       }
 
       [part="content"] {
         padding: 0;
       }
+
+      :host([loading]) [part="loader"] {
+        height: 2px;
+        position: absolute;
+        z-index: 1;
+        top: -2px;
+        left: 0;
+        right: 0;
+        background:
+          var(--material-background-color) linear-gradient(
+            90deg,
+            transparent 0%,
+            transparent 20%,
+            var(--material-primary-color) 20%,
+            var(--material-primary-color) 40%,
+            transparent 40%,
+            transparent 60%,
+            var(--material-primary-color) 60%,
+            var(--material-primary-color) 80%,
+            transparent 80%,
+            transparent 100%
+          ) 0 0 / 400% 100% repeat-x;
+        opacity: 0;
+        animation:
+          3s linear infinite material-combo-box-loader-progress,
+          .3s .1s both material-combo-box-loader-fade-in;
+      }
+
+      [part="loader"]::before {
+        content: '';
+        display: block;
+        height: 100%;
+        opacity: 0.16;
+        background: var(--material-primary-color);
+      }
+
+      @keyframes material-combo-box-loader-fade-in {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes material-combo-box-loader-progress {
+        0% {
+          background-position: 0 0;
+          background-size: 300% 100%;
+        }
+
+        33% {
+          background-position: -100% 0;
+          background-size: 400% 100%;
+        }
+
+        67% {
+          background-position: -200% 0;
+          background-size: 250% 100%;
+        }
+
+        100% {
+          background-position: -300% 0;
+          background-size: 300% 100%;
+        }
+      }
     </style>
   </template>
 </dom-module>