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({ processName: 'file-upload', destroyRef: 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.watchResourceLoadingIndicator({
      processName: 'fetch-user', 
      status: this.userResource.status, 
      destroyRef: 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.watchResourceLoadingIndicators({
      resourcesLoadingIndicators: [
        { processName: 'load-users', resource: this.users.status },
        { processName: 'load-settings', resource: this.settings.status }
      ],
      destroyRef: this.#destroyRef
    });
  }
}