Skip to content

Commit b51cba7

Browse files
committed
fix(arc-saas): appling loader to resolve delay in data display issue
appling loader to resolve delay in data display issue GH-106
1 parent efde01f commit b51cba7

File tree

3 files changed

+44
-12
lines changed

3 files changed

+44
-12
lines changed

projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.html

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,24 @@ <h2 class="heading">Manage Plan</h2>
1515
</button>
1616
</div>
1717
</div>
18-
<!-- ag-grid -->
19-
<div class="grid">
20-
<ag-grid-angular
21-
class="ag-theme-quartz"
22-
[columnDefs]="colDefs"
23-
[editType]="'fullRow'"
24-
[rowSelection]="rowSelection"
25-
[gridOptions]="gridOptions"
26-
(gridReady)="onGridReady($event)"
27-
(rowEditingStopped)="(onRowEditingStopped)"
28-
>
29-
</ag-grid-angular>
18+
<div *ngIf="isLoading" class="loader">
19+
<div class="loading-spinner"></div>
20+
</div>
21+
22+
<div *ngIf="!isLoading">
23+
<!-- ag-grid -->
24+
<div class="grid">
25+
<ag-grid-angular
26+
class="ag-theme-quartz"
27+
[columnDefs]="colDefs"
28+
[editType]="'fullRow'"
29+
[rowSelection]="rowSelection"
30+
[gridOptions]="gridOptions"
31+
(gridReady)="onGridReady($event)"
32+
(rowEditingStopped)="(onRowEditingStopped)"
33+
>
34+
</ag-grid-angular>
35+
</div>
3036
</div>
3137
<!-- Add Plan Button-->
3238
</nb-card-body>

projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,25 @@
1616
justify-content: space-between;
1717
align-items: center;
1818
}
19+
20+
.loader {
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
height: 100px;
25+
}
26+
27+
.loading-spinner {
28+
border: 4px solid rgba(0, 0, 0, 0.1);
29+
width: 40px;
30+
height: 40px;
31+
border-radius: 50%;
32+
border-left-color: #09f;
33+
animation: spin 1s linear infinite;
34+
}
35+
36+
@keyframes spin {
37+
to {
38+
transform: rotate(360deg);
39+
}
40+
}

projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export class ManagePlansComponent extends RouteComponentBaseDirective {
2929
gridOptions: GridOptions;
3030
getResp: Plan[];
3131
limit = 5;
32+
isLoading: boolean;
3233
colDefs: ColDef[] = [
3334
{field: 'name', headerName: 'Plan Name', width: 200, minWidth: 20},
3435
{field: 'description', width: 200, minWidth: 20},
@@ -75,16 +76,19 @@ export class ManagePlansComponent extends RouteComponentBaseDirective {
7576
this.gridApi = params.api;
7677
const dataSource: IDatasource = {
7778
getRows: (params: IGetRowsParams) => {
79+
this.isLoading = true;
7880
const page = params.endRow / this.limit;
7981
const paginatedLeads = this.getPaginatedPlans(page, this.limit);
8082
const totalLead = this.getTotal();
8183
combineLatest([paginatedLeads, totalLead]).subscribe(
8284
([data, count]) => {
8385
params.successCallback(data, count.count);
86+
this.isLoading = false;
8487
},
8588

8689
err => {
8790
params.failCallback();
91+
this.isLoading = false;
8892
},
8993
);
9094
},

0 commit comments

Comments
 (0)