npm install @wamlib/ngx-loading-indicator-manager

Basic usage in Template

export class AppComponent {
  readonly loadingIndicatorManager = inject(LoadingIndicatorManager);
}

@if (loadingIndicatorManager.isLoadingShown()) {
 <mat-spinner/>
}

Manually show/hide

export class UploadComponent {
  readonly loadingIndicatorManager = inject(LoadingIndicatorManager);
  readonly #destroyRef = inject(DestroyRef);

  async onFileUpload(file: File) {
    /* Passing #destroyRef ensures cleanup if the user navigates away.*/
    this.loadingIndicatorManager.show('file-upload', this.#destroyRef);

    try {
      await this.uploadService.upload(file);
    } finally {
      /* Always use 'finally' to ensure the indicator is removed */
      this.#loadingIndicatorManager.hide('file-upload');
    }
  }
}

Track a single resource's loading state

export class UserProfileComponent {
  readonly loadingIndicatorManager = inject(LoadingIndicatorManager);
  readonly #destroyRef = inject(DestroyRef);
  
  userResource = resource({
    loader: () => fetch('/api/user').then(res => res.json())
  });

  constructor() {
    this.loadingIndicatorManager.watchResource(
      'fetch-user', 
      this.userResource.status, 
      this.#destroyRef
    );
  }
}

Track multiple resource loading states

export class DashboardComponent {
  readonly loadingIndicatorManager = inject(LoadingIndicatorManager);
  readonly #destroyRef = inject(DestroyRef);
  
  users = resource({loader: () => fetchUsers()});
  
  settings = resource({
    request: () => {
      const userData = this.users.value();
      return userData ? { userId: userData.id } : null;
    },
    loader: ({ request }) => fetchSettings(request.userId)
  });

  constructor() {
    this.loadingIndicatorManager.watchResources([
      { processName: 'load-users', statusSignal: this.users.status },
      { processName: 'load-settings', statusSignal: this.settings.status }
    ], this.#destroyRef);
  }
}