implemented custom circle loaders

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 (items?.length > 0) {
-                      return html`<div class="table">
-                          ${items?.map((item) => renderItem(item))}
-                      </div>`;
+                  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``;
                   }
-                  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";