implemented custom circle loaders

src/common/core/BaseElement/BaseElement.ts

@@ -12,11 +12,13 @@ import { closest } from "core/utils";
 class BaseElement extends HTMLElement {
     @closest appMain: AppMainElement;
     private _appMain: AppMainElement;
+    public loader: Loader;
     private elementDisconnectCallbacks: Array<Function> = [];
     constructor() {
         super();
         this.connectedCallback = this.connectedCallback.bind(this);
         this.disconnectedCallback = this.disconnectedCallback.bind(this);
+        this.loader = new Loader(this);
     }
 
     public get routerService(): RouterService {
@@ -115,3 +117,25 @@ class BaseElement extends HTMLElement {
 }
 
 export default BaseElement;
+
+class Loader {
+    private _loading: number = 0;
+
+    constructor(private _main: BaseElement) {}
+
+    public start = () => {
+        this._loading++;
+        this._main?.update?.();
+    };
+
+    public stop = () => {
+        if (this._loading > 0) {
+            this._loading--;
+            this._main?.update?.();
+        }
+    };
+
+    public get loading() {
+        return this._loading > 0;
+    }
+}

src/components/app-loader/AppLoaderElement.ts

@@ -21,7 +21,6 @@ class AppLoaderElement extends BaseComponentElement {
         if (this._loading > 0) {
             this._loading--;
         }
-        console.log(this._loading);
         if (this._loading == 0) {
             this.finishInitiate();
         }
@@ -43,15 +42,11 @@ class AppLoaderElement extends BaseComponentElement {
         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``;

src/components/app-menu/AppMenuElement.ts

@@ -19,9 +19,8 @@ class AppMenuElement extends BaseComponentElement {
         this.walletService = new WalletService(this.appMain?.appService);
         if (this.appMain.isAuth) {
             this.getWallets();
-        } else {
-            this.update();
         }
+        this.update();
         this.appMain.addEventListener("tokenchange", this.updateToken);
         this.appMain.addEventListener("walletupdate", this.updateToken);
     };

src/components/app-pagination/AppPaginationElement.ts

@@ -1,6 +1,7 @@
-import { attr, controller } from "@github/catalyst";
+import { attr, controller, target } from "@github/catalyst";
 import { html, TemplateResult } from "@github/jtml";
 import { BaseComponentElement } from "common/";
+import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
 
 @controller
 class AppPaginationElement extends BaseComponentElement {
@@ -58,12 +59,15 @@ class AppPaginationElement extends BaseComponentElement {
         }
 
         try {
+            this.loader?.start?.();
             const response = await this.fetchFunc(options);
+            this.loader?.stop?.();
             this.setItems(response?.items);
             this.totalItems = response?.totalRecords;
             this.page = response?.page;
             this.rpp = response?.rpp;
         } catch (err) {
+            this.loader?.stop?.();
             console.error(err);
         }
     };
@@ -98,12 +102,16 @@ class AppPaginationElement extends BaseComponentElement {
         const renderItems = this.customRenderItems
             ? this.customRenderItems
             : () => {
+                  if (this.loader && this.loader.loading) {
+                      return html`<circle-loader></circle-loader>`;
+                  } else {
                       if (items?.length > 0) {
                           return html`<div class="table">
                               ${items?.map((item) => renderItem(item))}
                           </div>`;
                       }
                       return html``;
+                  }
               };
 
         const renderPagination = () => {

src/components/circle-loader/CircleLoaderElement.ts

@@ -0,0 +1,23 @@
+import { attr, controller } from "@github/catalyst";
+import { html } from "@github/jtml";
+import { BaseComponentElement } from "common/";
+
+@controller
+class CircleLoaderElement extends BaseComponentElement {
+    @attr size: string;
+    constructor() {
+        super();
+    }
+
+    elementConnected = (): void => {
+        this.update();
+    };
+
+    render = () => {
+        return html`<div
+            class="circle-loader ${this.size ? `-${this.size}` : ""}"
+        ></div>`;
+    };
+}
+
+export type { CircleLoaderElement };

src/components/index.ts

@@ -7,6 +7,7 @@ export * from "./app-slot/AppSlotElement";
 export * from "./app-menu/AppMenuElement";
 export * from "./input-field/InputFieldElement";
 export * from "./app-loader/AppLoaderElement";
+export * from "./circle-loader/CircleLoaderElement";
 
 // LAST
 export * from "./app-main/AppMainElement";

src/configs/testing/app-settings.json

@@ -0,0 +1,6 @@
+{
+    "apiUrl": "main-wallet--dtnyc2vcdgu2re9j-gtw.qovery.io",
+    "apiVersion": "v1",
+    "ssl": true,
+    "appName": "Wallets Testing"
+}

src/styles/circle-loader/circle-loader.scss

@@ -0,0 +1,44 @@
+.circle-loader {
+    $--loader-border: 6px;
+    $--loader-size: 45px;
+    border: $--loader-border solid $gray-02;
+    border-top: $--loader-border solid $blue-08;
+    width: $--loader-size;
+    height: $--loader-size;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+    margin: 5px;
+    &.-sml {
+        $--loader-border: 3px;
+        $--loader-size: 22px;
+        border: $--loader-border solid $gray-02;
+        border-top: $--loader-border solid $blue-08;
+        width: $--loader-size;
+        height: $--loader-size;
+    }
+    &.-med {
+        $--loader-border: 9px;
+        $--loader-size: 67px;
+        border: $--loader-border solid $gray-02;
+        border-top: $--loader-border solid $blue-08;
+        width: $--loader-size;
+        height: $--loader-size;
+    }
+    &.-lrg {
+        $--loader-border: 12px;
+        $--loader-size: 90px;
+        border: $--loader-border solid $gray-02;
+        border-top: $--loader-border solid $blue-08;
+        width: $--loader-size;
+        height: $--loader-size;
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/styles/circle-loader/index.scss

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

src/styles/main.scss

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

webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const settings = require("./src/configs/development/app-settings.json");
 const { DefinePlugin } = require('webpack');
 
 const alias = {
@@ -14,7 +13,22 @@ const alias = {
     styles: path.resolve(__dirname, "/styles"),
 };
 
-module.exports = {
+
+module.exports = (env, args) => {
+    let settings = {}
+    if (env && env.env) {
+        switch (env.env) {
+            case "testing":
+                settings = require("./src/configs/testing/app-settings.json");
+                break;
+            case "develop":
+            default:
+                settings = require("./src/configs/development/app-settings.json");
+        }
+    } else {
+                settings = require("./src/configs/development/app-settings.json");
+    }
+    return {
         entry: {
             app: ['babel-polyfill', './src/index']
         },
@@ -96,4 +110,5 @@ module.exports = {
         devServer: {
             historyApiFallback: true,
         }   
+    }
 }