FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 14:18:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

implemented custom circle loaders

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-05 20:38:12 +02:00
parent cf537b923c
commit 8ef770921e
11 changed files with 210 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/app-pagination/AppPaginationElement.ts
View File

@@ -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 = () => {