diff --git a/packages/common/src/button.js b/packages/common/src/button.js index d921b94a30260d2dc44f9c6581cccb0d6de5c6f8..00012652f9b4e25019bf75222c54671b277dcdfc 100644 --- a/packages/common/src/button.js +++ b/packages/common/src/button.js @@ -184,6 +184,7 @@ export class IconButton extends ScopedElementsMixin(LitElement) { super(); this.iconName = ''; this.disabled = false; + this.loading = false; } static get properties() { @@ -191,9 +192,20 @@ export class IconButton extends ScopedElementsMixin(LitElement) { ...super.properties, iconName: {type: String, attribute: 'icon-name'}, disabled: {type: Boolean, reflect: true}, + loading: {type: Boolean}, }; } + start() { + this.loading = true; + this.disabled = true; + } + + stop() { + this.loading = false; + this.disabled = false; + } + static get styles() { // language=css return css` @@ -248,7 +260,10 @@ export class IconButton extends ScopedElementsMixin(LitElement) { ? 'is-not-loading' : ''}" ?disabled="${this.disabled}"> - <slot><dbp-icon class="dbp-button-icon" name="${this.iconName}"></dbp-icon></slot> + <slot><dbp-icon + class="dbp-button-icon" + name="${this.iconName}" + style="display: ${this.loading ? 'none' : 'inline'}"></dbp-icon></slot> <dbp-mini-spinner class="spinner" style="display: ${this.loading ? 'inline' : 'none'}"></dbp-mini-spinner>