habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: improve loading indication for modals

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-08-11 00:00:07 +02:00
parent 0f5e0a774a
commit f9e826d553
4 changed files with 42 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/flows/FlowExecutor.ts
View File

@ -18,6 +18,7 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
import AKGlobal from "../authentik.css";
import { unsafeHTML } from "lit-html/directives/unsafe-html";
import "../elements/LoadingOverlay";
import "./access_denied/FlowAccessDenied";
import "./stages/authenticator_static/AuthenticatorStaticStage";
import "./stages/authenticator_totp/AuthenticatorTOTPStage";
@ -46,7 +47,6 @@ import {
import { DEFAULT_CONFIG, tenant } from "../api/Config";
import { ifDefined } from "lit-html/directives/if-defined";
import { until } from "lit-html/directives/until";
import { PFSize } from "../elements/Spinner";
import { TITLE_DEFAULT } from "../constants";
import { configureSentry } from "../api/Sentry";
import { WebsocketClient } from "../common/ws";
@ -68,16 +68,6 @@ export class FlowExecutor extends LitElement implements StageHost {
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFButton, PFTitle, PFList, PFBackgroundImage, AKGlobal].concat(css`
.ak-loading {
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;
}
.ak-hidden {
display: none;
}
@ -196,12 +186,6 @@ export class FlowExecutor extends LitElement implements StageHost {
} as ChallengeTypes;
}
renderLoading(): TemplateResult {
return html`<div class="ak-loading">
<ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>`;
}
renderChallenge(): TemplateResult {
if (!this.challenge) {
return html``;
@ -309,7 +293,10 @@ export class FlowExecutor extends LitElement implements StageHost {
if (!this.challenge) {
return html`<ak-empty-state ?loading=${true} header=${t`Loading`}> </ak-empty-state>`;
}
return html` ${this.loading ? this.renderLoading() : html``} ${this.renderChallenge()} `;
return html`
${this.loading ? html`<ak-loading-overlay></ak-loading-overlay>` : html``}
${this.renderChallenge()}
`;
}
render(): TemplateResult {