Matryoshka Loading Mixin

Defines a loading flag for elements that automatically take into account the loading state of its child elements.

The element implementing MatryoshkaLoaderMixin gains a few interesting Boolean properties:

• hostLoading (flag to be set when your element is loading)
• loading (this.hostLoading || this._areChildrenLoading())
• loaded (!loading)

<mixin-loader-element countdown="2000">
  <mixin-loader-element countdown="3000">1</mixin-loader-element>
  <mixin-loader-element countdown="5000" defer>
    <non-mixin-loader-element>
      <mixin-loader-element countdown="10000">1</mixin-loader-element>
    </non-mixin-loader-element>
  </mixin-loader-element>
</mixin-loader-element>

Implementing it your own element

class YourCustomElement extends MatryoshkaLoaderMixin(Polymer.Element) {
  static get is() { return 'your-custom-element' }
  
  connectedCallback() {
    super.connectedCallback();
    
    //Do your expensive operation
    Polymer.Async.timeOut.run(_ => {
      //When you're done:
      this.hostLoading = false;
    });
  }
}
customElements.define(YourCustomElement.is, YourCustomElement)