fix(arc-saas): appling loader to resolve delay in data display issue

appling loader to resolve delay in data display issue

GH-106

Author: Deepika516

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

@@ -15,18 +15,24 @@ <h2 class="heading">Manage Plan</h2>
           </button>
         </div>
       </div>
-      <!-- ag-grid -->
-      <div class="grid">
-        <ag-grid-angular
-          class="ag-theme-quartz"
-          [columnDefs]="colDefs"
-          [editType]="'fullRow'"
-          [rowSelection]="rowSelection"
-          [gridOptions]="gridOptions"
-          (gridReady)="onGridReady($event)"
-          (rowEditingStopped)="(onRowEditingStopped)"
-        >
-        </ag-grid-angular>
+      <div *ngIf="isLoading" class="loader">
+        <div class="loading-spinner"></div>
+      </div>
+
+      <div *ngIf="!isLoading">
+        <!-- ag-grid -->
+        <div class="grid">
+          <ag-grid-angular
+            class="ag-theme-quartz"
+            [columnDefs]="colDefs"
+            [editType]="'fullRow'"
+            [rowSelection]="rowSelection"
+            [gridOptions]="gridOptions"
+            (gridReady)="onGridReady($event)"
+            (rowEditingStopped)="(onRowEditingStopped)"
+          >
+          </ag-grid-angular>
+        </div>
       </div>
       <!-- Add Plan Button-->
     </nb-card-body>

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

@@ -16,3 +16,25 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px; 
+}
+
+.loading-spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border-left-color: #09f; 
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -29,6 +29,7 @@ export class ManagePlansComponent extends RouteComponentBaseDirective {
   gridOptions: GridOptions;
   getResp: Plan[];
   limit = 5;
+  isLoading: boolean;
   colDefs: ColDef[] = [
     {field: 'name', headerName: 'Plan Name', width: 200, minWidth: 20},
     {field: 'description', width: 200, minWidth: 20},
@@ -75,16 +76,19 @@ export class ManagePlansComponent extends RouteComponentBaseDirective {
     this.gridApi = params.api;
     const dataSource: IDatasource = {
       getRows: (params: IGetRowsParams) => {
+        this.isLoading = true;
         const page = params.endRow / this.limit;
         const paginatedLeads = this.getPaginatedPlans(page, this.limit);
         const totalLead = this.getTotal();
         combineLatest([paginatedLeads, totalLead]).subscribe(
           ([data, count]) => {
             params.successCallback(data, count.count);
+            this.isLoading = false;
           },
 
           err => {
             params.failCallback();
+            this.isLoading = false;
           },
         );
       },