add: solution template for loading-indicator

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -74,7 +74,14 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   templateUrl: './extensible-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ExtensibleTableComponent<R = any> implements OnChanges, OnDestroy {
+export class ExtensibleTableComponent<R = any> implements OnChanges {
+  readonly #injector = inject(Injector);
+  readonly getInjected = this.#injector.get.bind(this.#injector);
+  protected readonly locale = inject(LOCALE_ID);
+  protected readonly config = inject(ConfigStateService);
+  protected readonly entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
+  protected readonly permissionService = inject(PermissionService);
+
   protected _actionsText!: string;
   @Input()
   set actionsText(value: string) {
@@ -106,13 +113,6 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, OnDestroy {
   readonly actionList: EntityActionList<R>;
 
   readonly trackByFn: TrackByFunction<EntityProp<R>> = (_, item) => item.name;
-
-  locale = inject(LOCALE_ID);
-  private config = inject(ConfigStateService);
-  entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
-  #injector = inject(Injector);
-  getInjected = this.#injector.get.bind(this.#injector);
-  permissionService = this.#injector.get(PermissionService);
   subscriptionService = this.#injector.get(SubscriptionService);
   listService = this.#injector.get(ListService);
   routerWaitService = this.#injector.get(RouterWaitService);

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts

@@ -7,7 +7,7 @@ import {
   DoCheck,
   SimpleChanges,
   inject,
-  DestroyRef
+  DestroyRef,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DatatableComponent } from '@swimlane/ngx-datatable';
@@ -24,14 +24,14 @@ import {
   exportAs: 'ngxDatatableList',
 })
 export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
-  @Input() list!: ListService;
-
   protected readonly table = inject(DatatableComponent);
   protected readonly cdRef = inject(ChangeDetectorRef);
   protected readonly destroyRef = inject(DestroyRef);
   protected readonly localizationService = inject(LocalizationService);
   protected readonly ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true });
 
+  @Input() list!: ListService;
+
   constructor() {
     this.setInitialValues();
   }
@@ -43,6 +43,25 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
   ngOnInit() {
     this.subscribeToPage();
     this.subscribeToSort();
+    const indicator = document.createElement(`div`);
+    indicator.innerHTML = `
+    <div class="d-flex justify-content-center align-items-center m-1">
+      <div class="spinner-border" role="status" id="loading">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+    `;
+
+    let ref: HTMLDivElement;
+    this.list.isLoading$.subscribe(isLoading => {
+      if (isLoading) {
+        ref = this.table.element.querySelector('.datatable-body').appendChild(indicator);
+      } else {
+        const { emptyMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
+        this.table.messages.emptyMessage = this.localizationService.instant(emptyMessage);
+        ref?.remove();
+      }
+    });
   }
 
   ngOnChanges({ list }: SimpleChanges) {
@@ -63,24 +82,26 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
       this.ngxDatatableMessages || defaultNgxDatatableMessages;
 
     this.table.messages = {
-      emptyMessage: this.localizationService.instant(emptyMessage),
+      emptyMessage: '',
       totalMessage: this.localizationService.instant(totalMessage),
       selectedMessage: this.localizationService.instant(selectedMessage),
     };
   }
 
   protected subscribeToSort() {
-    this.table.sort.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ sorts: [{ prop, dir }] }) => {
-      if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
-        this.list.sortKey = '';
-        this.list.sortOrder = '';
-        this.table.sorts = [];
-        this.cdRef.detectChanges();
-      } else {
-        this.list.sortKey = prop;
-        this.list.sortOrder = dir;
-      }
-    });
+    this.table.sort
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(({ sorts: [{ prop, dir }] }) => {
+        if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
+          this.list.sortKey = '';
+          this.list.sortOrder = '';
+          this.table.sorts = [];
+          this.cdRef.detectChanges();
+        } else {
+          this.list.sortKey = prop;
+          this.list.sortOrder = dir;
+        }
+      });
   }
 
   protected subscribeToPage() {