Directory

← Back

polymer-matryoshka-loader

Matryoshka (Russian Doll) Loading Mixin

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/reach-digital/polymer-matryoshka-loader on 2019-05-22 ]

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)

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#^2.0.2
Released
2017-08-12
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

polymer-matryoshka-loader - Vaadin Add-on Directory

Matryoshka (Russian Doll) Loading Mixin polymer-matryoshka-loader - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/reach-digital/polymer-matryoshka-loader](https://github.com//reach-digital/polymer-matryoshka-loader/blob/0.8.0/README.md) on 2019-05-22 ]** # 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) ```html 1 1 ``` ## Implementing it your own element ```js 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) ```
View on GitHub
Documentation
GitHub Homepage
Online Demo
Issue tracker

polymer-matryoshka-loader version 0.8.0
### Dependencies * polymer#^2.0.2

Online