Skip to content

Commit aa2f5d6

Browse files
yeshamavaniyeshamavani
authored
Merge pull request #107 from sourcefuse/GH-106
fix(arc-saas): Appling loader to resolve delay in data display issue
2 parents 3610148 + 7874476 commit aa2f5d6

11 files changed

+98
-76
lines changed

‎projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@
33
<nb-card-body>
44
<h2 class="heading">Billing Details</h2>
55
<!-- ag-grid -->
6-
<div class="grid">
7-
<ag-grid-angular
8-
class="ag-theme-quartz"
9-
[columnDefs]="colDefs"
10-
[gridOptions]="gridOptions"
11-
>
12-
</ag-grid-angular>
6+
<div *ngIf="isLoading" class="loader">
7+
<div class="loading-spinner"></div>
8+
</div>
9+
<div *ngIf="!isLoading">
10+
<div class="grid">
11+
<ag-grid-angular
12+
class="ag-theme-quartz"
13+
[columnDefs]="colDefs"
14+
[gridOptions]="gridOptions"
15+
>
16+
</ag-grid-angular>
17+
</div>
1318
</div>
1419
</nb-card-body>
1520
</nb-card>

‎projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export class BillingPlanComponent extends RouteComponentBaseDirective {
2525
gridApi: GridApi;
2626
gridOptions: GridOptions;
2727
limit = 5;
28+
isLoading: boolean;
2829
colDefs: ColDef[] = [
2930
{field: 'companyName', width: 200, minWidth: 20},
3031
{field: 'userName', width: 200, minWidth: 20},
@@ -60,16 +61,19 @@ export class BillingPlanComponent extends RouteComponentBaseDirective {
6061
this.gridApi = params.api;
6162
const dataSource: IDatasource = {
6263
getRows: (params: IGetRowsParams) => {
64+
this.isLoading = true;
6365
const page = params.endRow / this.limit;
6466
const paginatedLeads = this.getPaginatedBillPlans(page, this.limit);
6567
const totalLead = this.getTotal();
6668
combineLatest([paginatedLeads, totalLead]).subscribe(
6769
([data, count]) => {
6870
params.successCallback(data, count.count);
71+
this.isLoading = false;
6972
},
7073

7174
err => {
7275
params.failCallback();
76+
this.isLoading = false;
7377
},
7478
);
7579
},

‎projects/saas-ui/src/app/main/components/lead-list/lead-list.component.html

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22
<nb-card accent="danger" class="card-style">
33
<nb-card-body>
44
<h2 class="heading">Lead List</h2>
5-
<div class="grid">
6-
<!-- ag-grid -->
7-
<ag-grid-angular
8-
class="ag-theme-quartz"
9-
[columnDefs]="colDefs"
10-
[gridOptions]="gridOptions"
11-
>
12-
</ag-grid-angular>
5+
<div *ngIf="isLoading" class="loader">
6+
<div class="loading-spinner"></div>
7+
</div>
8+
<div *ngIf="!isLoading">
9+
<div class="grid">
10+
<!-- ag-grid -->
11+
<ag-grid-angular
12+
class="ag-theme-quartz"
13+
[columnDefs]="colDefs"
14+
[gridOptions]="gridOptions"
15+
>
16+
</ag-grid-angular>
17+
</div>
1318
</div>
1419
</nb-card-body>
1520
</nb-card>

‎projects/saas-ui/src/app/main/components/lead-list/lead-list.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {HttpClient} from '@angular/common/http';
2222
})
2323
export class LeadListComponent extends RouteComponentBaseDirective {
2424
// defining column names here
25+
isLoading: boolean;
2526
colDefs: ColDef[] = [
2627
{
2728
field: 'firstName',
@@ -67,16 +68,19 @@ export class LeadListComponent extends RouteComponentBaseDirective {
6768
this.gridApi = params.api;
6869
const dataSource: IDatasource = {
6970
getRows: (params: IGetRowsParams) => {
71+
this.isLoading = true;
7072
const page = params.endRow / this.limit;
7173
const paginatedLeads = this.getPaginatedLeads(page, this.limit);
7274
const totalLead = this.getTotal();
7375
combineLatest([paginatedLeads, totalLead]).subscribe(
7476
([data, count]) => {
7577
params.successCallback(data, count.count);
78+
this.isLoading = false;
7679
},
7780

7881
err => {
7982
params.failCallback();
83+
this.isLoading = false;
8084
},
8185
);
8286
},

‎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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@
1616
justify-content: space-between;
1717
align-items: center;
1818
}
19+

‎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
},

‎projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.html

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,22 @@ <h2 class="heading">Onboarded Tenant List</h2>
1515
</button>
1616
</div>
1717
</div>
18-
19-
<!-- ag-grid -->
20-
<div class="grid-wrapper">
21-
<div class="grid">
22-
<ag-grid-angular
23-
style="width: calc(100vw-200px); height: 650px"
24-
class="ag-theme-quartz"
25-
[columnDefs]="colDefs"
26-
[gridOptions]="gridOptions"
27-
(gridReady)="onGridReady($event)"
28-
>
29-
</ag-grid-angular>
18+
<div *ngIf="isLoading" class="loader">
19+
<div class="loading-spinner"></div>
20+
</div>
21+
<div *ngIf="!isLoading">
22+
<!-- ag-grid -->
23+
<div class="grid-wrapper">
24+
<div class="grid">
25+
<ag-grid-angular
26+
style="width: calc(100vw-200px); height: 650px"
27+
class="ag-theme-quartz"
28+
[columnDefs]="colDefs"
29+
[gridOptions]="gridOptions"
30+
(gridReady)="onGridReady($event)"
31+
>
32+
</ag-grid-angular>
33+
</div>
3034
</div>
3135
</div>
3236
</nb-card-body>

‎projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.scss

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -23,43 +23,6 @@ a {
2323
color: #19a5ff;
2424
}
2525

26-
.loader-overlay {
27-
position: fixed;
28-
top: 0;
29-
left: 0;
30-
width: 100%;
31-
height: 100%;
32-
background: rgba(255, 255, 255, 0.8);
33-
display: flex;
34-
justify-content: center;
35-
align-items: center;
36-
z-index: 1000;
37-
}
3826

39-
.loader {
40-
border: 8px solid #f3f3f3;
41-
border-top: 8px solid #3498db;
42-
border-radius: 50%;
43-
width: 60px;
44-
height: 60px;
45-
-webkit-animation: spin 2s linear infinite;
46-
animation: spin 2s linear infinite;
47-
}
4827

49-
@-webkit-keyframes spin {
50-
0% {
51-
transform: rotate(0deg);
52-
}
53-
100% {
54-
transform: rotate(360deg);
55-
}
56-
}
5728

58-
@keyframes spin {
59-
0% {
60-
transform: rotate(0deg);
61-
}
62-
100% {
63-
transform: rotate(360deg);
64-
}
65-
}

‎projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export class OnboardingTenantListComponent extends RouteComponentBaseDirective {
3030
params: TenantDetails;
3131
gridOptions: GridOptions;
3232
limit = 10;
33+
isLoading: boolean;
3334
defaultColDef: ColDef = {
3435
flex: 1,
3536
minWidth: 150,
@@ -153,16 +154,19 @@ export class OnboardingTenantListComponent extends RouteComponentBaseDirective {
153154
this.gridApi = params.api;
154155
const dataSource: IDatasource = {
155156
getRows: (params: IGetRowsParams) => {
157+
this.isLoading = true;
156158
const page = params.endRow / this.limit;
157159
const paginatedLeads = this.getPaginatedTenantDetails(page, this.limit);
158160
const totalLead = this.getTotal();
159161
combineLatest([paginatedLeads, totalLead]).subscribe(
160162
([data, count]) => {
161163
params.successCallback(data, count.count);
164+
this.isLoading = false;
162165
},
163166

164167
err => {
165168
params.failCallback();
169+
this.isLoading = false;
166170
},
167171
);
168172
},

0 commit comments

Comments
 (0)