Refactor: loading component

src-ui/src/app/components/loading-component/loading.component.spec.ts

@@ -0,0 +1,43 @@
+import { TestBed } from '@angular/core/testing'
+import { Subject } from 'rxjs'
+import { LoadingComponentWithPermissions } from './loading.component'
+import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { Component } from '@angular/core'
+
+class MockComponentWithPermissions extends ComponentWithPermissions {}
+
+@Component({
+  template: '',
+})
+class MockLoadingComponent extends LoadingComponentWithPermissions {}
+
+describe('LoadingComponentWithPermissions', () => {
+  let component: LoadingComponentWithPermissions
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [LoadingComponentWithPermissions],
+    })
+    component = new MockLoadingComponent()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should have loading set to true by default', () => {
+    expect(component.loading).toBeTruthy()
+  })
+
+  it('should have reveal set to false by default', () => {
+    expect(component.reveal).toBeFalsy()
+  })
+
+  it('should call next and complete on unsubscribeNotifier with itself on destroy', () => {
+    const nextSpy = jest.spyOn(component['unsubscribeNotifier'], 'next')
+    const completeSpy = jest.spyOn(component['unsubscribeNotifier'], 'complete')
+    component.ngOnDestroy()
+    expect(nextSpy).toHaveBeenCalledWith(component)
+    expect(completeSpy).toHaveBeenCalled()
+  })
+})

src-ui/src/app/components/loading-component/loading.component.ts

@@ -0,0 +1,23 @@
+import { Subject } from 'rxjs'
+import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { Directive, OnDestroy } from '@angular/core'
+
+@Directive()
+export abstract class LoadingComponentWithPermissions
+  extends ComponentWithPermissions
+  implements OnDestroy
+{
+  public loading: boolean = true
+  public reveal: boolean = false
+
+  protected unsubscribeNotifier: Subject<any> = new Subject()
+
+  constructor() {
+    super()
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(this)
+    this.unsubscribeNotifier.complete()
+  }
+}