From a1f961db97f062de4494b5e358130536d61da3ca Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 23 Mar 2021 19:52:00 +0100
Subject: [PATCH] web/flow: fix styling of loading between stages

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/flows/FlowExecutor.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/src/flows/FlowExecutor.ts b/web/src/flows/FlowExecutor.ts
index 51583440a..ef1d1d096 100644
--- a/web/src/flows/FlowExecutor.ts
+++ b/web/src/flows/FlowExecutor.ts
@@ -41,6 +41,7 @@ import { until } from "lit-html/directives/until";
 import { TITLE_SUFFIX } from "../elements/router/RouterOutlet";
 import { AccessDeniedChallenge } from "./access_denied/FlowAccessDenied";
 import { getQueryVariables } from "./utils";
+import { SpinnerSize } from "../elements/Spinner";
 
 export const NEXT_ARG = "next";
 
@@ -169,10 +170,9 @@ export class FlowExecutor extends LitElement implements StageHost {
     }
 
     renderLoading(): TemplateResult {
-        return html`<ak-empty-state
-                ?loading=${true}
-                header=${gettext("Loading")}>
-        </ak-empty-state>`;
+        return html`<div class="ak-loading">
+            <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
+        </div>`;
     }
 
     renderChallenge(): TemplateResult {
@@ -230,7 +230,10 @@ export class FlowExecutor extends LitElement implements StageHost {
 
     renderChallengeWrapper(): TemplateResult {
         if (!this.challenge) {
-            return this.renderLoading();
+            return html`<ak-empty-state
+                    ?loading=${true}
+                    header=${gettext("Loading")}>
+            </ak-empty-state>`;
         }
         return html`
             ${this.loading ? this.renderLoading() : html``}