admin/shell: add loading animation

passbook/admin/templates/administration/shell.html

@@ -174,5 +174,6 @@
     </div>
 </div>
 <pb-admin-shell defaultUrl="{% url 'passbook_admin:overview' %}" role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
+    <div slot="body"></div>
 </pb-admin-shell>
 {% endblock %}

passbook/static/static/src/AdminSiteShell.ts

@@ -1,4 +1,8 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+// @ts-ignore
+import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
+// @ts-ignore
+import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
 
 @customElement("pb-admin-shell")
 export class AdminSiteShell extends LitElement {
@@ -10,8 +14,22 @@ export class AdminSiteShell extends LitElement {
         }
     }
 
-    createRenderRoot() {
+    @property()
-        return this;
+    loading: boolean = false;
+
+    static get styles() {
+        return [css`
+            :host {
+                position: relative;
+            }
+            :host .pf-l-bullseye {
+                position: absolute;
+                height: 100%;
+                width: 100%;
+                top: 0;
+                left: 0;
+            }
+        `, BullseyeStyle, SpinnerStyle];
     }
 
     constructor() {
@@ -25,8 +43,9 @@ export class AdminSiteShell extends LitElement {
         if (url === "") {
             return
         }
+        this.loading = true;
         fetch(url).then(r => r.text()).then((t) => {
-            this.innerHTML = t;
+            this.querySelector("[slot=body]")!.innerHTML = t;
         }).then(() => {
             this.querySelectorAll("a").forEach(a => {
                 if (a.href === "") {
@@ -40,11 +59,24 @@ export class AdminSiteShell extends LitElement {
                     a.href = `#${a.href}`;
                 }
             });
+            this.loading = false;
         });
     }
 
     render() {
-        return html`${this.innerHTML}`;
+        return html`
+        ${this.loading ? html`
+        <div class="pf-l-bullseye">
+            <div class="pf-l-bullseye__item">
+                <span class="pf-c-spinner pf-m-xl" role="progressbar" aria-valuetext="Loading...">
+                    <span class="pf-c-spinner__clipper"></span>
+                    <span class="pf-c-spinner__lead-ball"></span>
+                    <span class="pf-c-spinner__tail-ball"></span>
+                </span>
+            </div>
+        </div>`: ""}
+        <slot name="body">
+        </slot>`;
     }
 
 }