Nuevo componente: Spinner

- Implementación de la pantalla de carga.

src/app/app.component.html

@@ -1 +1,3 @@
 <router-outlet/>
+
+<app-spinner/>

src/app/app.component.ts

@@ -3,11 +3,13 @@ import {Router, RouterOutlet} from '@angular/router';
 import {DataSidebar} from './models/data-sidebar';
 import {SidebarService} from './services/layout/sidebar.service';
 import {BrowserStorageService} from './services/layout/browser-storage.service';
+import {SpinnerComponent} from '@app/layout/spinner/spinner.component';
 
 @Component({
   selector: 'app-root',
   imports: [
-    RouterOutlet
+    RouterOutlet,
+    SpinnerComponent
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'

src/app/app.config.ts

@@ -8,13 +8,15 @@ import {authInterceptor} from './shared/interceptor/auth.interceptor';
 import {providePrimeNG} from 'primeng/config';
 import Lara from '@primeng/themes/lara';
 import {definePreset} from '@primeng/themes';
+import {spinnerInterceptor} from '@app/shared/interceptor/spinner.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes, withComponentInputBinding()),
     provideHttpClient(
       withInterceptors([
-        authInterceptor
+        authInterceptor,
+        spinnerInterceptor
       ])
     ),
     provideAnimations(),

src/app/layout/spinner/spinner.component.css

@@ -0,0 +1,7 @@
+.spinner-content {
+  top: 0;
+  min-width: 100%;
+  min-height: 100%;
+  left: 0;
+  z-index: 1073;
+}

src/app/layout/spinner/spinner.component.html

@@ -0,0 +1,7 @@
+@if (show()) {
+  <div class="spinner-content align-items-center d-flex justify-content-center position-fixed">
+    <p-progress-spinner ariaLabel="loading"
+                        strokeWidth="4"/>
+  </div>
+  <div class="modal-backdrop fade show"></div>
+}

src/app/layout/spinner/spinner.component.ts

@@ -0,0 +1,20 @@
+import {Component, computed} from '@angular/core';
+import {ProgressSpinner} from 'primeng/progressspinner';
+import {SpinnerService} from '@app/services/layout/spinner.service';
+
+@Component({
+  selector: 'app-spinner',
+  imports: [
+    ProgressSpinner
+  ],
+  templateUrl: './spinner.component.html',
+  styleUrl: './spinner.component.css'
+})
+export class SpinnerComponent {
+
+  show = computed(() => this.spinnerService.getSpinner());
+
+  constructor(private spinnerService: SpinnerService) {
+  }
+
+}

src/app/services/layout/spinner.service.ts

@@ -0,0 +1,32 @@
+import {Injectable, signal} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SpinnerService {
+
+  private spinner = signal<boolean>(false);
+
+  private timeout: any;
+
+  constructor() {
+  }
+
+  show() {
+    clearTimeout(this.timeout);
+
+    this.timeout = setTimeout(() => {
+      this.spinner.set(true);
+    }, 500);
+  }
+
+  hide() {
+    clearTimeout(this.timeout);
+    this.spinner.set(false);
+  }
+
+  getSpinner() {
+    return this.spinner();
+  }
+
+}

src/app/shared/interceptor/spinner.interceptor.ts

@@ -0,0 +1,17 @@
+import {HttpInterceptorFn} from '@angular/common/http';
+import {inject} from '@angular/core';
+import {SpinnerService} from '@app/services/layout/spinner.service';
+import {finalize} from 'rxjs';
+
+export const spinnerInterceptor: HttpInterceptorFn = (req, next) => {
+  const spinnerService = inject(SpinnerService);
+
+  spinnerService.show();
+
+  return next(req)
+    .pipe(
+      finalize(() => {
+        spinnerService.hide();
+      })
+    );
+};