From 85d3153bec495e6f6d1a166519d06eef7fec6b68 Mon Sep 17 00:00:00 2001
From: Christina Toegl <toegl@tugraz.at>
Date: Fri, 16 Dec 2022 11:47:05 +0100
Subject: [PATCH] Add start and stop functionality for icon button loading
spinners
---
packages/common/src/button.js | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/packages/common/src/button.js b/packages/common/src/button.js
index d921b94a..00012652 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>
--
GitLab