web: add loading animation to flowexecutor

authentik/flows/templates/flows/shell.html

@@ -6,17 +6,6 @@
 {% block head %}
 {{ block.super }}
 <style>
-.ak-loading,
-.pf-c-login__main >iframe {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-}
-.ak-hidden {
-    display: none
-}
 .pf-c-background-image::before {
     background-image: url("{{ background_url }}");
     background-position: center;

web/src/pages/generic/FlowExecutor.ts

@@ -1,5 +1,5 @@
 import { gettext } from "django";
-import { LitElement, html, customElement, property, TemplateResult } from "lit-element";
+import { LitElement, html, customElement, property, TemplateResult, CSSResult, css } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import { getCookie } from "../../utils";
 import "../../elements/stages/identification/IdentificationStage";
@@ -22,6 +22,8 @@ import { PromptChallenge } from "../../elements/stages/prompt/PromptStage";
 import { AuthenticatorTOTPChallenge } from "../../elements/stages/authenticator_totp/AuthenticatorTOTPStage";
 import { AuthenticatorStaticChallenge } from "../../elements/stages/authenticator_static/AuthenticatorStaticStage";
 import { WebAuthnAuthenticatorRegisterChallenge } from "../../elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
+import { COMMON_STYLES } from "../../common/styles";
+import { SpinnerSize } from "../../elements/Spinner";
 
 @customElement("ak-flow-executor")
 export class FlowExecutor extends LitElement {
@@ -31,8 +33,27 @@ export class FlowExecutor extends LitElement {
     @property({attribute: false})
     challenge?: Challenge;
 
-    createRenderRoot(): Element | ShadowRoot {
-        return this;
+    @property({type: Boolean})
+    loading: boolean = false;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES.concat(css`
+            .ak-loading {
+                display: flex;
+                height: 100%;
+                width: 100%;
+                justify-content: center;
+                align-items: center;
+                position: absolute;
+                background-color: #0303039e;
+            }
+            .ak-hidden {
+                display: none;
+            }
+            :host {
+                position: relative;
+            }
+        `);
     }
 
     constructor() {
@@ -49,6 +70,7 @@ export class FlowExecutor extends LitElement {
                 "X-CSRFToken": csrftoken,
             },
         });
+        this.loading = true;
         return fetch(request, {
             method: "POST",
             mode: "same-origin",
@@ -62,15 +84,21 @@ export class FlowExecutor extends LitElement {
             })
             .catch((e) => {
                 this.errorMessage(e);
+            })
+            .finally(() => {
+                this.loading = false;
             });
     }
 
     firstUpdated(): void {
+        this.loading = true;
         Flow.executor(this.flowSlug).then((challenge) => {
             this.challenge = challenge;
         }).catch((e) => {
             // Catch JSON or Update errors
             this.errorMessage(e);
+        }).finally(() => {
+            this.loading = false;
         });
     }
 
@@ -95,21 +123,17 @@ export class FlowExecutor extends LitElement {
         };
     }
 
-    loading(): TemplateResult {
-        return html` <div class="pf-c-login__main-body ak-loading">
-            <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
-                <span class="pf-c-spinner__clipper"></span>
-                <span class="pf-c-spinner__lead-ball"></span>
-                <span class="pf-c-spinner__tail-ball"></span>
-            </span>
+    renderLoading(): TemplateResult {
+        return html`<div class="ak-loading">
+            <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
         </div>`;
     }
 
-    render(): TemplateResult {
+    renderChallenge(): TemplateResult {
         if (!this.challenge) {
-            return this.loading();
+            return html``;
         }
-        switch(this.challenge.type) {
+        switch (this.challenge.type) {
             case ChallengeTypes.redirect:
                 console.debug(`authentik/flows: redirecting to ${(this.challenge as RedirectChallenge).to}`);
                 window.location.assign((this.challenge as RedirectChallenge).to);
@@ -146,4 +170,14 @@ export class FlowExecutor extends LitElement {
         }
         return html``;
     }
+
+    render(): TemplateResult {
+        if (!this.challenge) {
+            return this.renderLoading();
+        }
+        return html`
+            ${this.loading ? this.renderLoading() : html``}
+            ${this.renderChallenge()}
+        `;
+    }
 }