Refactor: loading component

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -44,7 +44,7 @@
       </tr>
     </thead>
     <tbody>
-      @if (isLoading) {
+      @if (loading) {
         <tr>
           <td colspan="5">
             <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -109,7 +109,7 @@
   </table>
 </div>
 
-@if (!isLoading) {
+@if (!loading) {
   <div class="d-flex mb-2">
     @if (collectionSize > 0) {
       <div>

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -39,8 +39,8 @@ import {
 import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 export interface ManagementListColumn {
   key: string
@@ -56,7 +56,7 @@ export interface ManagementListColumn {
 
 @Directive()
 export abstract class ManagementListComponent<T extends ObjectWithId>
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
   constructor(
@@ -86,8 +86,6 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   public sortField: string
   public sortReverse: boolean
 
-  public isLoading: boolean = false
-
   private nameFilterDebounce: Subject<string>
   protected unsubscribeNotifier: Subject<any> = new Subject()
   protected _nameFilter: string
@@ -95,8 +93,6 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   public selectedObjects: Set<number> = new Set()
   public togggleAll: boolean = false
 
-  public reveal: boolean = false
-
   ngOnInit(): void {
     this.reloadData()
 
@@ -115,11 +111,6 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
       })
   }
 
-  ngOnDestroy() {
-    this.unsubscribeNotifier.next(true)
-    this.unsubscribeNotifier.complete()
-  }
-
   getMatching(o: MatchingModel) {
     if (o.matching_algorithm == MATCH_AUTO) {
       return $localize`Automatic`
@@ -141,7 +132,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   }
 
   reloadData(extraParams: { [key: string]: any } = null) {
-    this.isLoading = true
+    this.loading = true
     this.clearSelection()
     this.service
       .listFiltered(
@@ -163,7 +154,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
       )
       .subscribe(() => {
         this.reveal = true
-        this.isLoading = false
+        this.loading = false
       })
   }