polymer-matryoshka-loader
Matryoshka (Russian Doll) Loading Mixin
[ 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)
Links
Compatibility
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
**[ 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 GitHubDocumentation
GitHub Homepage
Online Demo
Issue tracker
polymer-matryoshka-loader version 0.8.0
### Dependencies
* polymer#^2.0.2