implemented loaders

src/components/app-loader/AppLoaderElement.ts

@@ -0,0 +1,63 @@
+import { controller, target } from "@github/catalyst";
+import { html } from "@github/jtml";
+import { BaseComponentElement } from "common/";
+
+@controller
+class AppLoaderElement extends BaseComponentElement {
+    private finished: boolean = true;
+    private _loading: number = 0;
+
+    constructor() {
+        super();
+    }
+
+    public start = () => {
+        this.finished = false;
+        this._loading++;
+        this.update();
+    };
+
+    public stop = () => {
+        if (this._loading > 0) {
+            this._loading--;
+        }
+        console.log(this._loading);
+        if (this._loading == 0) {
+            this.finishInitiate();
+        }
+        this.update();
+    };
+
+    public get loading() {
+        return this._loading > 0;
+    }
+
+    private finishInitiate = () => {
+        setTimeout(() => {
+            this.finished = true;
+            this.update();
+        }, 300);
+    };
+
+    elementConnected = (): void => {
+        this.update();
+    };
+
+    public setFinished = () => {};
+
+    render = () => {
+        const renderLoader = (finished: boolean, loading: boolean) => {
+            if (!finished && !loading) {
+                console.log("Removing");
+                return html`<div class="loader --removing"></div>`;
+            } else if (loading) {
+                console.log("loading");
+                return html`<div class="loader --loading"></div>`;
+            }
+            return html``;
+        };
+        return html`${renderLoader(this.finished, this.loading)}`;
+    };
+}
+
+export type { AppLoaderElement };

src/components/app-main/AppMainElement.ts

@@ -3,6 +3,7 @@ import { AppService, HttpClient, RouterService } from "core/services";
 import { AuthStore } from "core/store";
 import { AppModalElement, AppRootElement } from "components/";
 import { closest } from "core/utils";
+import { AppLoaderElement } from "components/app-loader/AppLoaderElement";
 
 @controller
 class AppMainElement extends HTMLElement {
@@ -12,6 +13,7 @@ class AppMainElement extends HTMLElement {
     public appService: AppService;
     @target appModal: AppModalElement;
     @target mainRoot: AppRootElement;
+    @target appLoader: AppLoaderElement;
     @closest appMain: AppMainElement;
     public domEvents: any = {
         routechanged: new Event("routechanged"),
@@ -24,6 +26,7 @@ class AppMainElement extends HTMLElement {
     }
     connectedCallback() {
         if (this.appMain !== this) return;
+        this.createLoader();
         const mainRoot = this.createMainRoot();
         this.httpClient = new HttpClient();
         this.appService = new AppService(this, this.httpClient);
@@ -129,6 +132,12 @@ class AppMainElement extends HTMLElement {
         return _appModal;
     };
 
+    private createLoader = () => {
+        const _loader = document.createElement("app-loader");
+        _loader.setAttribute("data-target", "app-main.appLoader");
+        this.appendChild(_loader);
+    };
+
     private createModalContent = (element: string) => {
         const _modalElement = document.createElement(element);
         const _divEl = document.createElement("div");

src/components/index.ts

@@ -6,5 +6,8 @@ export * from "./app-root/AppRootElement";
 export * from "./app-slot/AppSlotElement";
 export * from "./app-menu/AppMenuElement";
 export * from "./input-field/InputFieldElement";
+export * from "./app-loader/AppLoaderElement";
+
+// LAST
 export * from "./app-main/AppMainElement";
 export * from "./app-shadow/AppShadowElement";