⏳ AlpuraLoadingComponent – Guía de uso

Este documento explica cómo consumir el componente AlpuraLoadingComponent en un proyecto Angular usando la clase AlpuraLoadingViewModel para gestionar su estado de carga de manera centralizada.

📁 Importaciones necesarias

En tu componente, NO necesitas importar directamente el AlpuraLoadingComponent, ya que está disponible a través del módulo de @alpura/core. Solo necesitas inyectar el AlpuraLoadingViewModel para gestionar el estado de carga.

Por ejemplo, en tu AppComponent:

import { Observable } from "rxjs";
import { AlpuraLoadingViewModel } from "@alpura/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  public loading$: Observable<boolean>;

  constructor(private vmLoading: AlpuraLoadingViewModel) {
    this.loading$ = this.vmLoading.loading$;
  }
}

---

🧩 HTML de ejemplo

Usa la directiva *ngIf para mostrar el loading cuando el observable loading$ emita true:

<alpura-loading *ngIf="loading$ | async"></alpura-loading>

Este enfoque permite mostrar el AlpuraLoadingComponent en cualquier lugar de tu aplicación, mientras que AlpuraLoadingViewModel se encarga de controlar su estado.

---

🔍 Parámetros explicados

Elemento	Tipo	Descripción
loading$ (Observable)	Observable<boolean>	Observable que emite true o false para mostrar/ocultar el loading.
setLoading(value: boolean)	function	Método para actualizar el estado del loading a nivel global.

---

🧭 Cómo activar/desactivar el loading

Para controlar el estado del loading, inyecta el AlpuraLoadingViewModel en tu ViewModel o servicio y usa el método setLoading().

Ejemplo:

this.vmLoading.setLoading(true); // Muestra el loading
this.vmLoading.setLoading(false); // Oculta el loading

Generalmente, este control se hace antes y después de una operación asíncrona, como una llamada HTTP.

---

🏗️ Ejemplo de integración en un ViewModel

import { Injectable } from "@angular/core";
import { AlpuraLoadingViewModel } from "@alpura/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { finalize, tap, catchError, of } from "rxjs";

@Injectable({ providedIn: "root" })
export class AseguradoraFormViewModel {
  constructor(
    private vmLoading: AlpuraLoadingViewModel,
    private aseguradoraService: AseguradoraService
  ) {}

  fetchCreateAseguradora(payload: AseguradoraPayload): void {
    this.vmLoading.setLoading(true);

    this.aseguradoraService
      .createAseguradora(payload)
      .pipe(
        takeUntilDestroyed(this.destroyRef),
        tap(() => {
          /* Lógica de éxito */
        }),
        catchError((error) => {
          /* Manejo de errores */ return of(null);
        }),
        finalize(() => this.vmLoading.setLoading(false)) // Oculta el loading al finalizar
      )
      .subscribe();
  }
}

---

📝 Notas adicionales

• El componente AlpuraLoadingComponent es global y puede usarse en cualquier componente de tu aplicación.
• El AlpuraLoadingViewModel gestiona un BehaviorSubject<boolean> llamado loading$ que representa el estado del loading.
• Puedes subscribirte a loading$ para controlar manualmente el estado de carga en otros lugares de la aplicación si lo necesitas.

---

🚀 Resultado esperado

Cuando se use correctamente:

1. El loading se mostrará automáticamente cuando setLoading(true) sea llamado.
2. El loading desaparecerá automáticamente cuando setLoading(false) sea llamado.
3. No necesitas preocuparte por la lógica de visualización: el componente AlpuraLoadingComponent se encarga de mostrar/ocultar la animación de carga.

---

📬 Soporte

Para dudas o mantenimiento del componente AlpuraLoadingComponent o AlpuraLoadingViewModel, contactar al equipo de arquitectura.