imporve UX get devices loading

src/app/pages/dashboard/pages/devices/components/device-card/device-card.component.html

@@ -1,4 +1,4 @@
-<nb-card class="main-card-device">
+<nb-card [nbSpinner]="this.deviceService.isLoadingGetDevice" nbSpinnerStatus="primary" class="main-card-device">
     <nb-card-header>
         <div class="main-card-device-header">
             <div class="title-card">

src/app/pages/dashboard/pages/devices/components/device-card/device-card.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { NbDialogService } from '@nebular/theme';
 import { Device } from 'src/app/models/device';
 import { DeviceService } from 'src/app/services/device/device.service';
@@ -10,6 +10,7 @@ import { CreateDeviceDialogComponent } from '../../dialog/create-device-dialog/c
   styleUrls: ['./device-card.component.scss']
 })
 export class DeviceCardComponent implements OnInit {
+  @Input() loading!: boolean;
   constructor(private dialogService: NbDialogService, public deviceService: DeviceService, private ref: ChangeDetectorRef) { }
   ngOnInit(): void {
     this.deviceService.renderUIDeviceStatus = () => { this.ref.detectChanges() }

src/app/pages/dashboard/pages/devices/devices.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { DevicesRoutingModule } from './devices-routing.module';
 import { DevicesComponent } from './devices.component';
-import { NbBadgeModule, NbButton, NbButtonModule, NbCardModule, NbIconModule, NbInputModule, NbTagModule, NbTooltipModule } from '@nebular/theme';
+import { NbBadgeModule, NbButton, NbButtonModule, NbCardModule, NbIconModule, NbInputModule, NbSpinnerModule, NbTagModule, NbTooltipModule } from '@nebular/theme';
 import { HeaderTotalComponent } from './components/header-total/header-total.component';
 import { DeviceCardComponent } from './components/device-card/device-card.component';
 import { LogsComponent } from './components/logs/logs.component';
@@ -35,6 +35,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     NbTagModule,
     NbInputModule,
     QRCodeModule,
+    NbSpinnerModule,
   ]
 })
 export class DevicesModule { }

src/app/services/device/device.service.ts

@@ -21,21 +21,28 @@ import { AuthService } from '../auth/auth.service';
 export class DeviceService {
   prefix = "/device";
   deviceStatusCollection: CollectionReference<DocumentData>;
+
+  isLoadingGetDevice: boolean = false;
+
   devices: Array<Device> = [];
-  renderUIDeviceStatus: Function = () => {};
-  renderUIDeviceStatistics: Function = () => {};
+  renderUIDeviceStatus: Function = () => { };
+  renderUIDeviceStatistics: Function = () => { };
 
   constructor(private http: HttpClient, private authService: AuthService, private fireStore: Firestore) {
     this.deviceStatusCollection = collection(this.fireStore, 'device_status');
   }
 
   getDevices() {
+    this.isLoadingGetDevice = true;
     this.http.get<Array<Device>>(environment.endpoint + this.prefix, {
       headers: {
         "token": this.authService.token,
         "api-x-key": environment.apiKey,
       }
-    }).subscribe(value => this.devices = value);
+    }).subscribe(value => {
+      this.devices = value;
+      this.isLoadingGetDevice = false;
+    });
   }
 
   listenStatus(did: string) {
@@ -61,7 +68,7 @@ export class DeviceService {
     let deviceDocument = doc(this.deviceStatusCollection, did);
     getDoc(deviceDocument).then(value => {
       if (value.data()) {
-        this.listenStatus(did);  
+        this.listenStatus(did);
       } else {
         let device = this.devices.find(element => element.id == did);
         device!.status = DeviceStatus.created;