loader

ng-seed/package.json

@@ -53,7 +53,7 @@
     "ngx-perfect-scrollbar": "10.1.0",
     "ngx-scrollbar": "^7.5.6",
     "ngx-sortablejs": "^3.1.4",
-    "ngx-spinner": "^10.0.1",
+    "ngx-spinner": "^11.0.2",
     "ornamentum": "^8.1.4",
     "perfect-scrollbar": "^1.5.0",
     "primeflex": "^3.3.0",

ng-seed/src/app/end-user/consultants/consultants-list.component.html

@@ -1,3 +1,4 @@
+<div *ngIf="consultants.length != 0">
 <mat-toolbar>
    <span style="text-align: center;">Appointment</span>
  </mat-toolbar>
@@ -82,3 +83,24 @@
  <!-- </ng-scrollbar> -->
 
  </div>
+ <footer>
+   <p>
+      © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+   </p>
+</footer>
+</div>
+ <div *ngIf="consultants.length == 0">
+   <div fxLayout="row" class="flexCard">
+      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
+         <div><img src="assets/images/service.png" width="300" height="300"></div>
+      </div>
+   </div>
+   <div fxLayout="row" class="flexCard">
+      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
+         <h3 class="noAssignedService">No Service</h3>          
+      </div>
+   </div>
+  </div>
+
+
+ <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#178a78" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Please Wait...... </p></ngx-spinner>

ng-seed/src/app/end-user/consultants/consultants-list.component.scss

@@ -188,3 +188,10 @@ mat-toolbar{
  ::ng-deep body{
     background-color: #f7f8f5 !important;
 }
+footer {
+    background-color: #d1d1d1;
+    height:50px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }

ng-seed/src/app/end-user/consultants/consultants-list.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
 import { EndUserService } from '../end-user.service';
 
 @Component({
@@ -15,7 +16,9 @@ export class ConsultantsListComponent implements OnInit {
   consultants:any =[];
   public filterdata = null;
   bgColorPast: any=[];
-  constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService) {}
+  constructor(private router:Router,public dialog: MatDialog,public end_user:EndUserService,private spinner:NgxSpinnerService) {
+    this.spinner.show();
+  }
 
 
   ngOnInit(): void {
@@ -46,6 +49,10 @@ export class ConsultantsListComponent implements OnInit {
       ))
   );
   this.consultants = result;
+  setTimeout(() => {
+    /** spinner ends after 5 seconds */
+    this.spinner.hide();
+  }, 1000);
   console.log(this.consultants)
   let workinghrs = []
   this.consultants.forEach(element => {

ng-seed/src/app/end-user/end-user.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 
 import { EndUserRoutingModule } from './end-user-routing.module';
@@ -17,7 +17,7 @@ import { CustomerInfoComponent } from './customer-info/customer-info.component';
 import { BookingSummaryComponent } from './booking-summary/booking-summary.component';
 import { SummaryComponent } from './summary/summary.component';
 import { DoctorProfileComponent } from './doctor-profile/doctor-profile.component';
-
+import { NgxSpinnerModule } from "ngx-spinner";
 
 @NgModule({
   declarations: [
@@ -33,8 +33,11 @@ import { DoctorProfileComponent } from './doctor-profile/doctor-profile.componen
     EndUserRoutingModule,
     DemoMaterialModule, 
     NgScrollbarModule,
-    SharedModule
+    SharedModule,
+    NgxSpinnerModule
+    
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers:[
     EndUserService,
     DatePipe

ng-seed/src/app/end-user/service-list-details/service-list.component.html

@@ -1,4 +1,6 @@
-<mat-toolbar>
+
+    <div *ngIf="servicesList.length != 0">
+      <mat-toolbar>
     <span style="text-align: center;">Appointment</span> 
     <h3 style="margin-left:35% ;">{{full_data[0].business[0].busName}}</h3>
  </mat-toolbar>
@@ -44,7 +46,23 @@
     </div>
  </div>
  <footer>
-    <p>
+   <p>
-       © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
+      © 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
-    </p>
+   </p>
- </footer>
+</footer>
+</div>
+ <div *ngIf="servicesList.length == 0">
+   <div fxLayout="row" class="flexCard">
+      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
+         <div><img src="assets/images/service.png" width="300" height="300"></div>
+      </div>
+   </div>
+   <div fxLayout="row" class="flexCard">
+      <div  fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" fxLayoutAlign="center center">
+         <h3 class="noAssignedService">No Service</h3>          
+      </div>
+   </div>
+  </div>
+
+
+ <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#178a78" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Please Wait...... </p></ngx-spinner>

ng-seed/src/app/end-user/service-list-details/service-list.component.ts

@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { AddServiceComponent } from 'app/appoinment/service-list-details/add-service/add-service.component';
+import { NgxSpinnerService } from 'ngx-spinner';
 import Swal from 'sweetalert2';
 import { EndUserService } from '../end-user.service';
 
@@ -27,9 +28,13 @@ export class ServiceListComponent implements OnInit {
   public servicesList:any = new MatTableDataSource();
   full_data: any=[];
  
-  constructor(public _api:EndUserService, public dialog: MatDialog,public enduser:EndUserService,    private router: Router,) { }
+  constructor(private spinner:NgxSpinnerService,public _api:EndUserService, public dialog: MatDialog,public enduser:EndUserService,    private router: Router,) { 
 
-  ngOnInit(): void {
+     /** spinner starts on init */
+     this.spinner.show();
+  }
+
+  ngOnInit() {
     
     for (let i = 0; i < 7; i++) {
       const random = i % 7;
@@ -85,8 +90,13 @@ export class ServiceListComponent implements OnInit {
        ))
    );
       
-       console.log(result)
+       console.log(result,result.length)
-        this.servicesList =  result
+        this.servicesList = result
+
+          setTimeout(() => {
+            /** spinner ends after 5 seconds */
+            this.spinner.hide();
+          }, 1000);
        // this.businessList = res.data;        
       } else{