From cdf88e44770d5359f5bce945d59cfb852d83fa8b Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 18 Jun 2022 13:36:18 +0200
Subject: [PATCH] web/elements: add spinner when loading dynamic routes

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/router/Route.ts        | 7 ++++++-
 web/src/elements/router/RouterOutlet.ts | 9 ++++-----
 web/src/interfaces/UserInterface.ts     | 2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/elements/router/Route.ts b/web/src/elements/router/Route.ts
index 7aab1c69f..cfc332f64 100644
--- a/web/src/elements/router/Route.ts
+++ b/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;
diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts
index 25f01f0f4..1e9f61517 100644
--- a/web/src/elements/router/RouterOutlet.ts
+++ b/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;
diff --git a/web/src/interfaces/UserInterface.ts b/web/src/interfaces/UserInterface.ts
index bd0b8d583..5f682c447 100644
--- a/web/src/interfaces/UserInterface.ts
+++ b/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 [