web/elements: add spinner when loading dynamic routes

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

web/src/elements/router/Route.ts

@@ -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;

web/src/elements/router/RouterOutlet.ts

@@ -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;

web/src/interfaces/UserInterface.ts

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