implemented loaders

src/common/core/BaseElement/BaseElement.ts

@@ -1,5 +1,10 @@
 import { html, render, TemplateResult } from "@github/jtml";
-import { AppMainElement, AppModalElement, AppRootElement } from "components/";
+import {
+    AppLoaderElement,
+    AppMainElement,
+    AppModalElement,
+    AppRootElement,
+} from "components/";
 import { AppService, RouterService } from "core/services";
 import { AuthStore } from "core/store";
 import { closest } from "core/utils";
@@ -33,6 +38,9 @@ class BaseElement extends HTMLElement {
     public get mainRoot(): AppRootElement {
         return this.appMain?.mainRoot;
     }
+    public get appLoader(): AppLoaderElement {
+        return this.appMain?.appLoader;
+    }
 
     public get isAuth(): boolean {
         return this.appMain?.isAuth();

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

src/core/services/app-service/AppService.ts

@@ -17,11 +17,13 @@ class AppService {
             Authorization: `BEARER ${this.appMain?.authStore?.token}`,
         };
         try {
+            this?.appMain?.appLoader?.start?.();
             const response = await this.httpClient.post(
                 url,
                 data,
                 headersParam
             );
+            this?.appMain?.appLoader?.stop?.();
             if (
                 response?.statusCode == 400 ||
                 response?.statusCode == 500 ||
@@ -35,6 +37,7 @@ class AppService {
             }
             return response;
         } catch (err) {
+            this?.appMain?.appLoader?.stop?.();
             throw err;
         }
     };
@@ -49,7 +52,9 @@ class AppService {
             Authorization: `BEARER ${this.appMain?.authStore?.token}`,
         };
         try {
+            this?.appMain?.appLoader?.start?.();
             const response = await this.httpClient.put(url, data, headersParam);
+            this?.appMain?.appLoader?.stop?.();
             if (
                 response?.statusCode == 400 ||
                 response?.statusCode == 500 ||
@@ -63,6 +68,7 @@ class AppService {
             }
             return response;
         } catch (err) {
+            this?.appMain?.appLoader?.stop?.();
             throw err;
         }
     };
@@ -77,11 +83,13 @@ class AppService {
             Authorization: `BEARER ${this.appMain?.authStore?.token}`,
         };
         try {
+            this?.appMain?.appLoader?.start?.();
             const response = await this.httpClient.delete(
                 url,
                 data,
                 headersParam
             );
+            this?.appMain?.appLoader?.stop?.();
             if (
                 response?.statusCode == 400 ||
                 response?.statusCode == 500 ||
@@ -95,6 +103,7 @@ class AppService {
             }
             return response;
         } catch (err) {
+            this?.appMain?.appLoader?.stop?.();
             throw err;
         }
     };
@@ -109,11 +118,13 @@ class AppService {
             Authorization: `BEARER ${this.appMain?.authStore?.token}`,
         };
         try {
+            this?.appMain?.appLoader?.start?.();
             const response = await this.httpClient.get(
                 url,
                 params,
                 headersParam
             );
+            this?.appMain?.appLoader?.stop?.();
             if (
                 response?.statusCode == 400 ||
                 response?.statusCode == 500 ||
@@ -127,6 +138,7 @@ class AppService {
             }
             return response;
         } catch (err) {
+            this?.appMain?.appLoader?.stop?.();
             throw err;
         }
     };

src/core/store/AuthStore.ts

@@ -44,10 +44,12 @@ class AuthStore {
 
     checkToken = async (token: string) => {
         try {
-            const response = await this.authService.checkToken({ token });
+            if (token && token !== "null") {
-            if (!(response && response.valid)) {
+                const response = await this.authService.checkToken({ token });
-                this.token = null;
+                if (!(response && response.valid)) {
-                this.appMain.routerService.goTo("/token-expired");
+                    this.token = null;
+                    this.appMain.routerService.goTo("/token-expired");
+                }
             }
         } catch (err) {
             this.token = null;

src/styles/app-loader/app-loader.scss

@@ -0,0 +1,27 @@
+.loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 5px;
+    width: 0;
+    background-color: $blue-09;
+    z-index: 2000;
+    &.--loading {
+        animation: animateBar 5s linear;
+    }
+
+    &.--removing {
+        width: 100%;
+    }
+}
+
+.progress .progress-bar {
+}
+@keyframes animateBar {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}

src/styles/app-loader/index.scss

@@ -0,0 +1 @@
+@import "./app-loader.scss";

src/styles/main.scss

@@ -4,3 +4,4 @@
 @import "./sidebar/index.scss";
 @import "./modal/index.scss";
 @import "./table/index.scss";
+@import "./app-loader/index.scss";