diff --git a/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.html b/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.html
index 4571b8d..36d4918 100755
--- a/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.html
+++ b/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.html
@@ -1,3 +1,17 @@
+<ng-template #content let-modal>
+<div class="modal-header">
+	<h5 class="modal-title">Attendere...</h5>
+</div>
+<div class="modal-body">
+    <div class="text-center">
+		<div class="spinner-border text-dark" role="status">
+			<span class="sr-only">Attendere...</span>
+		</div>
+	</div>
+</div>
+</ng-template>
+
+
 <div class="table-responsive">
 	<h2 id="logs-page-heading">Rendicontazione</h2>
 
@@ -36,15 +50,11 @@
 			</div>
 			
 
-			<button class="btn btn-primary" type="button" [disabled]="isLoading"
+			<button class="btn btn-primary" type="button" 
 				(click)="rendiconta()">Rendiconta</button>
 		</form>
 
-		<div *ngIf="isLoading" class="d-flex justify-content-center">
-			<div class="spinner-border text-dark" role="status">
-				<span class="sr-only">Loading...</span>
-			</div>
-		</div>
+		
 	</div>
 
 </div>
diff --git a/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.ts b/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.ts
index ffcbde1..9428f55 100755
--- a/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.ts
+++ b/src/main/webapp/app/operations/rendicontazione/rendicontazione.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 
 import { RendicontazioneService } from './rendicontazione.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'jhi-rendicontazione',
@@ -11,9 +12,11 @@ import { HttpErrorResponse } from '@angular/common/http';
 export class RendicontazioneComponent implements OnInit {
   year: number;
   month: number;
-  isLoading = false; // hidden by default
 
-  constructor(private rendicontazioneService: RendicontazioneService) {
+  m!: NgbModalRef;
+  @ViewChild('content', { static: true }) content!: ElementRef;
+
+  constructor(private modalService: NgbModal, private rendicontazioneService: RendicontazioneService) {
     const date: Date = new Date();
     this.year = date.getFullYear();
     this.month = date.getMonth() + 1;
@@ -21,18 +24,26 @@ export class RendicontazioneComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  private openLoading(): void {
+    this.m = this.modalService.open(this.content, { size: 'sm', centered: true, backdrop: 'static', keyboard: false });
+  }
+
+  private closeLoading(): void {
+    this.m.close();
+  }
+
   rendiconta(): void {
-    this.isLoading = true;
+    this.openLoading();
     if (this.year == null || this.year <= 0) {
       // eslint-disable-next-line no-console
       console.log('Select the year');
-      this.isLoading = false;
+      this.closeLoading();
       return;
     }
     if (this.month == null || this.month <= 0) {
       // eslint-disable-next-line no-console
       console.log('Select the month');
-      this.isLoading = false;
+      this.closeLoading();
       return;
     }
 
@@ -43,13 +54,13 @@ export class RendicontazioneComponent implements OnInit {
   }
 
   private onSuccess(): void {
-    this.isLoading = false;
+    this.closeLoading();
     // eslint-disable-next-line no-console
     console.log('Success');
   }
 
   private onError(error: HttpErrorResponse): void {
-    this.isLoading = false;
+    this.closeLoading();
     // eslint-disable-next-line no-console
     console.log('Error');
     // eslint-disable-next-line no-console
diff --git a/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.html b/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.html
index 44f9ae1..c62f2b2 100755
--- a/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.html
+++ b/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.html
@@ -1,3 +1,18 @@
+<ng-template #content let-modal>
+<div class="modal-header">
+	<h5 class="modal-title">Attendere...</h5>
+</div>
+<div class="modal-body">
+    <div class="text-center">
+		<div class="spinner-border text-dark" role="status">
+			<span class="sr-only">Attendere...</span>
+		</div>
+	</div>
+</div>
+</ng-template>
+
+
+
 <div class="table-responsive">
 	<h2 id="logs-page-heading">Rendicontazione Singolo Cartellino</h2>
 
@@ -36,9 +51,9 @@
 			</div>
 
 			<div class="form-group">
-				<label for="dipendente">Dipendente</label> <select id="dipendente" name="dipendente"
-					class="form-select form-control" aria-label="Dipendente" 
-					[(ngModel)]="fiscalCode" required>
+				<label for="dipendente">Dipendente</label> <select id="dipendente"
+					name="dipendente" class="form-select form-control"
+					aria-label="Dipendente" [(ngModel)]="fiscalCode" required>
 					<option *ngFor="let dip of dipendenti" value="{{dip.fiscalCode}}">{{dip.fullname}}</option>
 				</select>
 
@@ -51,17 +66,16 @@
 
 			</div>
 
-
-
-			<button class="btn btn-primary" type="button" [disabled]="isLoading"
+			<button class="btn btn-primary" type="button" 
 				(click)="rendicontaSingolo()">Rendiconta Singolo</button>
 		</form>
 
-		<div *ngIf="isLoading" class="d-flex justify-content-center">
+		<!--  <div *ngIf="isLoading" class="d-flex justify-content-center">
 			<div class="spinner-border text-dark" role="status">
 				<span class="sr-only">Loading...</span>
 			</div>
 		</div>
+		-->
 	</div>
 
 </div>
diff --git a/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.ts b/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.ts
index aa3b948..d81f306 100755
--- a/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.ts
+++ b/src/main/webapp/app/operations/rendicontazionesingolo/rendicontazionesingolo.component.ts
@@ -1,45 +1,64 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { EPASPerson } from './rendicontazionesingolo.model';
 import { RendicontazioneSingoloService } from './rendicontazionesingolo.service';
 import { HttpErrorResponse } from '@angular/common/http';
 // import { Observable, OperatorFunction } from 'rxjs';
 // import { debounceTime, distinctUntilChanged, map, filter } from 'rxjs/operators';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'jhi-rendicontazionesingolo',
   templateUrl: './rendicontazionesingolo.component.html',
   styleUrls: ['rendicontazionesingolo.scss'],
 })
-export class RendicontazioneSingoloComponent implements OnInit {
+export class RendicontazioneSingoloComponent implements OnInit, AfterViewInit {
   year: number;
   month: number;
   fiscalCode: string;
   dipendenti: EPASPerson[];
-  isLoading = false; // hidden by default
+  // isLoading = false; // hidden by default
+  m!: NgbModalRef;
+  @ViewChild('content', { static: true }) content!: ElementRef;
 
-  constructor(private rendicontazioneSingoloService: RendicontazioneSingoloService) {
+  constructor(private modalService: NgbModal, private rendicontazioneSingoloService: RendicontazioneSingoloService) {
     const date: Date = new Date();
     this.year = date.getFullYear();
     this.month = date.getMonth() + 1;
     this.fiscalCode = '';
     this.dipendenti = [];
+    // this.content = {} as ElementRef;
   }
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {
+    this.openLoading();
     this.rendicontazioneSingoloService.getPersonList().subscribe(
       (result: EPASPerson[]) => {
         this.dipendenti = result;
+        this.fiscalCode = this.dipendenti[0].fiscalCode;
         this.dipendenti.forEach(dip =>
           // eslint-disable-next-line no-console
           console.log(dip)
         );
+        this.closeLoading();
       },
-      error =>
+      error => {
         // eslint-disable-next-line no-console
-        console.log(error)
+        console.log(error);
+        this.closeLoading();
+      }
     );
   }
 
+  private openLoading(): void {
+    this.m = this.modalService.open(this.content, { size: 'sm', centered: true, backdrop: 'static', keyboard: false });
+  }
+  private closeLoading(): void {
+    this.m.close();
+    // this.modalService.dismissAll('Loaded');
+  }
+
   // formatter = (dipendente: EPASPerson) => dipendente.fullname;
 
   // search: OperatorFunction<string, readonly EPASPerson[]> = (text$: Observable<string>) => text$.pipe(
@@ -50,24 +69,24 @@ export class RendicontazioneSingoloComponent implements OnInit {
   // );
 
   rendicontaSingolo(): void {
-    this.isLoading = true;
+    this.openLoading();
     if (this.year == null || this.year <= 0) {
       // eslint-disable-next-line no-console
       console.log('Select the year');
-      this.isLoading = false;
+      this.closeLoading();
       return;
     }
     if (this.month == null || this.month <= 0) {
       // eslint-disable-next-line no-console
       console.log('Select the month');
-      this.isLoading = false;
+      this.closeLoading();
       return;
     }
 
     if (!this.fiscalCode) {
       // eslint-disable-next-line no-console
       console.log('Select the employee');
-      this.isLoading = false;
+      this.closeLoading();
       return;
     }
 
@@ -81,13 +100,13 @@ export class RendicontazioneSingoloComponent implements OnInit {
   }
 
   private onSuccess(): void {
-    this.isLoading = false;
+    this.closeLoading();
     // eslint-disable-next-line no-console
     console.log('Success');
   }
 
   private onError(error: HttpErrorResponse): void {
-    this.isLoading = false;
+    this.closeLoading();
     // eslint-disable-next-line no-console
     console.log('Error');
     // eslint-disable-next-line no-console
diff --git a/src/main/webapp/app/operations/sync/sync.component.html b/src/main/webapp/app/operations/sync/sync.component.html
index 49725ae..8f9a9c7 100755
--- a/src/main/webapp/app/operations/sync/sync.component.html
+++ b/src/main/webapp/app/operations/sync/sync.component.html
@@ -1,3 +1,16 @@
+<ng-template #content let-modal>
+<div class="modal-header">
+	<h5 class="modal-title">Attendere...</h5>
+</div>
+<div class="modal-body">
+    <div class="text-center">
+		<div class="spinner-border text-dark" role="status">
+			<span class="sr-only">Attendere...</span>
+		</div>
+	</div>
+</div>
+</ng-template>
+
 <div class="table-responsive">
 	<h2 id="logs-page-heading">Sync</h2>
 
@@ -35,23 +48,18 @@
 				</select>
 			</div>
 			
-			<button class="btn btn-primary" type="button" [disabled]="isLoading"
+			<button class="btn btn-primary" type="button" 
 				(click)="sync('test')">Test</button>
-			<button class="btn btn-primary" type="button" [disabled]="isLoading"
+			<button class="btn btn-primary" type="button" 
 				(click)="sync('reads')">Leggi</button>
-			<button class="btn btn-primary" type="button" [disabled]="isLoading"
+			<button class="btn btn-primary" type="button" 
 				(click)="sync('writesOrario')">Scrivi Orario</button>
-			<button class="btn btn-primary" type="button" [disabled]="isLoading"
+			<button class="btn btn-primary" type="button" 
 				(click)="sync('writesTimeCards')">Scrivi Cartellini</button>
-			<button class="btn btn-primary" type="button" [disabled]="isLoading"
+			<button class="btn btn-primary" type="button" 
 				(click)="sync('writesOffSiteWorks')">Scrivi Lavoro Fuori Sede</button>
 		</form>
 
-		<div *ngIf="isLoading" class="d-flex justify-content-center">
-			<div class="spinner-border text-dark" role="status">
-				<span class="sr-only">Loading...</span>
-			</div>
-		</div>
 	</div>
 
 </div>
diff --git a/src/main/webapp/app/operations/sync/sync.component.ts b/src/main/webapp/app/operations/sync/sync.component.ts
index aefe771..e119de7 100755
--- a/src/main/webapp/app/operations/sync/sync.component.ts
+++ b/src/main/webapp/app/operations/sync/sync.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 // import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
 import { HttpErrorResponse } from '@angular/common/http';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
 import { SyncType } from './sync.model';
 import { SyncService } from './sync.service';
@@ -14,9 +15,11 @@ export class SyncComponent implements OnInit {
   syncT: SyncType | null = null;
   year: number;
   month: number;
-  isLoading = false; // hidden by default
 
-  constructor(private syncService: SyncService) {
+  m!: NgbModalRef;
+  @ViewChild('content', { static: true }) content!: ElementRef;
+
+  constructor(private modalService: NgbModal, private syncService: SyncService) {
     const date: Date = new Date();
     this.year = date.getFullYear();
     this.month = date.getMonth();
@@ -24,15 +27,25 @@ export class SyncComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  private openLoading(): void {
+    this.m = this.modalService.open(this.content, { size: 'sm', centered: true, backdrop: 'static', keyboard: false });
+  }
+  private closeLoading(): void {
+    this.m.close();
+    // this.modalService.dismissAll('Loaded');
+  }
+
   sync(syncType: SyncType): void {
-    this.isLoading = true;
+    this.openLoading();
     this.syncT = syncType;
     if (this.year == null || this.year <= 0) {
+      this.closeLoading();
       // eslint-disable-next-line no-console
       console.log('Select the year');
       return;
     }
     if (this.month == null || this.month <= 0) {
+      this.closeLoading();
       // eslint-disable-next-line no-console
       console.log('Select the month');
       return;
@@ -45,13 +58,13 @@ export class SyncComponent implements OnInit {
   }
 
   private onSuccess(): void {
-    this.isLoading = false;
+    this.closeLoading();
     // eslint-disable-next-line no-console
     console.log('Success');
   }
 
   private onError(error: HttpErrorResponse): void {
-    this.isLoading = false;
+    this.closeLoading();
     // eslint-disable-next-line no-console
     console.log('Error');
     // eslint-disable-next-line no-console