web/elements: add spinner when loading dynamic routes

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-06-18 13:36:18 +02:00
parent 1faba11a57
commit c824af5bc3
3 changed files with 11 additions and 7 deletions

View File

@ -1,6 +1,8 @@
import { TemplateResult, html } from "lit";
import { until } from "lit/directives/until.js";
import "../EmptyState";
export const SLUG_REGEX = "[-a-zA-Z0-9_]+";
export const ID_REGEX = "\\d+";
export const UUID_REGEX = "[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}";
@ -47,7 +49,10 @@ export class Route {
render(args: RouteArgs): TemplateResult {
if (this.callback) {
return html`${until(this.callback(args))}`;
return html`${until(
this.callback(args),
html`<ak-empty-state ?loading=${true}></ak-empty-state>`,
)}`;
}
if (this.element) {
return this.element;

View File

@ -103,12 +103,11 @@ export class RouterOutlet extends LitElement {
});
if (!matchedRoute) {
console.debug(`authentik/router: route "${activeUrl}" not defined`);
const route = new Route(
RegExp(""),
html`<div class="pf-c-page__main">
const route = new Route(RegExp(""), async () => {
return html`<div class="pf-c-page__main">
<ak-router-404 url=${activeUrl}></ak-router-404>
</div>`,
);
</div>`;
});
matchedRoute = new RouteMatch(route);
matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};
matchedRoute.fullUrl = activeUrl;

View File

@ -53,7 +53,7 @@ export class UserInterface extends LitElement {
tenant: CurrentTenant = DefaultTenant;
@property({ type: Number })
notificationsCount = -1;
notificationsCount = 0;
static get styles(): CSSResult[] {
return [