web: improve loading indication for modals

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/LoadingOverlay.ts

@@ -0,0 +1,28 @@
+import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import { PFSize } from "./Spinner";
+
+@customElement("ak-loading-overlay")
+export class LoadingOverlay extends LitElement {
+    static get styles(): CSSResult[] {
+        return [
+            PFBase,
+            css`
+                :host {
+                    display: flex;
+                    height: 100%;
+                    width: 100%;
+                    justify-content: center;
+                    align-items: center;
+                    position: absolute;
+                    background-color: var(--pf-global--BackgroundColor--dark-transparent-100);
+                    z-index: 1;
+                }
+            `,
+        ];
+    }
+
+    render(): TemplateResult {
+        return html`<ak-spinner size=${PFSize.XLarge}></ak-spinner>`;
+    }
+}

web/src/elements/buttons/ModalButton.ts

@@ -66,7 +66,7 @@ export class ModalButton extends LitElement {
         ];
     }
 
-    connectedCallback(): void {
+    firstUpdated(): void {
         if (this.handlerBound) return;
         window.addEventListener("keyup", this.keyUpHandler);
         this.handlerBound = true;

web/src/elements/forms/ModalForm.ts

@@ -4,12 +4,16 @@ import { EVENT_REFRESH } from "../../constants";
 import { ModalButton } from "../buttons/ModalButton";
 import { Form } from "./Form";
 import "../buttons/SpinnerButton";
+import "../LoadingOverlay";
 
 @customElement("ak-forms-modal")
 export class ModalForm extends ModalButton {
     @property({ type: Boolean })
     closeAfterSuccessfulSubmit = true;
 
+    @property({ type: Boolean })
+    loading = false;
+
     confirm(): Promise<void> {
         const form = this.querySelector<Form<unknown>>("[slot=form]");
         if (!form) {
@@ -24,6 +28,7 @@ export class ModalForm extends ModalButton {
                 this.open = false;
                 form?.resetForm();
             }
+            this.loading = false;
             this.dispatchEvent(
                 new CustomEvent(EVENT_REFRESH, {
                     bubbles: true,
@@ -34,7 +39,8 @@ export class ModalForm extends ModalButton {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-page__main-section pf-m-light">
+        return html`${this.loading ? html`<ak-loading-overlay></ak-loading-overlay>` : html``}
+            <section class="pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1 class="pf-c-title pf-m-2xl">
                         <slot name="header"></slot>
@@ -47,6 +53,7 @@ export class ModalForm extends ModalButton {
             <footer class="pf-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${() => {
+                        this.loading = true;
                         return this.confirm();
                     }}
                     class="pf-m-primary"