Add a new LoadingButton component

Add anew one since this adds some default padding and I don't want to
break existing layouts by changing the normal button.

If we figure out a way to keep the layout the same without changing
the padding then we can merge things back.

Also align the mini spinner a bit better with text

packages/common/index.js

@@ -2,11 +2,11 @@ import {EventBus} from './src/eventbus.js';
 import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js';
 import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
 import {MiniSpinner} from './src/mini-spinner.js';
-import {Button} from './src/button.js';
+import {Button, LoadingButton} from './src/button.js';
 import {Spinner} from './src/spinner.js';
 
 export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
 export {getIconSVGURL, getIconCSS, Icon};
 export {MiniSpinner};
-export {Button};
+export {Button, LoadingButton};
 export {Spinner};
\ No newline at end of file

packages/common/src/button.js

@@ -80,3 +80,79 @@ export class Button extends ScopedElementsMixin(LitElement) {
         `;
     }
 }
+
+export class LoadingButton extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super();
+        this.value = "";
+        this.type = "";
+        this.loading = false;
+        this.disabled = false;
+    }
+
+    static get scopedElements() {
+        return {
+            'dbp-mini-spinner': MiniSpinner,
+        };
+    }
+
+    static get properties() {
+        return {
+            value: { type: String },
+            type: { type: String },
+            loading: { type: Boolean },
+            disabled: { type: Boolean, reflect: true },
+        };
+    }
+
+    start() {
+        this.loading = true;
+        this.disabled = true;
+    }
+
+    stop() {
+        this.loading = false;
+        this.disabled = false;
+    }
+
+    static get styles() {
+        // language=css
+        return css`
+            ${commonStyles.getThemeCSS()}
+            ${commonStyles.getButtonCSS()}
+
+            .spinner {
+                padding-left: 0.5em;
+                min-width: 16px;
+            }
+
+            .loading-container {
+                display: flex;
+                align-items: baseline;
+            }
+
+            .label {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            :host {
+                display: inline-block;
+            }
+
+            .is-not-loading .label {
+                padding-left: 12px;
+                padding-right: 12px;
+            }
+        `;
+    }
+
+    render() {
+        return html`
+            <button class="button ${this.type} loading-container  ${!this.loading ? "is-not-loading" : ""}" ?disabled="${this.disabled}">
+                <div class="label">${this.value}</div> <dbp-mini-spinner class="spinner" style="display: ${this.loading ? "inline" : "none"}"></dbp-mini-spinner>
+            </button>
+        `;
+    }
+}

packages/common/src/mini-spinner.js

@@ -17,6 +17,7 @@ export class MiniSpinner extends LitElement {
         return css`
         .outer {
             display: inline-block;
+            vertical-align: sub;
         }
         .inner {
             display: flex;