fix: 1427 org unit display is not the good one on list when change filter

src/app/shared/components/containers/shared-organizational-unit-name/shared-organizational-unit-name.container.html

-{{name | async}}
+<div [dlcmSpinner]="isLoading"
+     [dlcmSpinnerStrokeWidth]="2"
+     [dlcmSpinnerDiameter]="24"
+>{{name}}</div>

src/app/shared/components/containers/shared-organizational-unit-name/shared-organizational-unit-name.container.ts

 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Input,
 } from "@angular/core";
@@ -9,8 +10,13 @@ import {SharedAbstractContainer} from "@shared/components/containers/shared-abst
 import {SharedOrgUnitAction} from "@shared/stores/organizational-unit/shared-organizational-unit.action";
 import {SharedOrganizationalUnitState} from "@shared/stores/organizational-unit/shared-organizational-unit.state";
 import {Observable} from "rxjs";
-import {map} from "rxjs/operators";
 import {
+  distinctUntilChanged,
+  filter,
+  take,
+} from "rxjs/operators";
+import {
+  isNotNullNorUndefined,
   isNullOrUndefined,
   ResourceState,
   StringUtil,
@@ -23,36 +29,57 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SharedOrganizationalUnitNameContainer extends SharedAbstractContainer {
-  name: Observable<string> = ResourceState.list(this._store, SharedOrganizationalUnitState).pipe(
-    map(list => this.mapOrgUnitName(list)),
-  );
+  name: string;
+  listOrgUnitObs: Observable<OrganizationalUnit[]> = ResourceState.list(this._store, SharedOrganizationalUnitState);
+
+  isLoading: boolean = false;
 
   _id: string;
 
   @Input()
   set id(id: string) {
-    if (!isNullOrUndefined(id)) {
+    this._id = id;
+    if (isNullOrUndefined(id)) {
+      this.name = StringUtil.stringEmpty;
+      return;
+    }
+    const listSnapshot = ResourceState.listSnapshot(this._store, SharedOrganizationalUnitState);
+    const orgUnit = this.getOrgUnit(listSnapshot);
+    if (isNullOrUndefined(orgUnit)) {
+      this.name = StringUtil.stringEmpty;
+      this.subscribe(this.listOrgUnitObs.pipe(
+        distinctUntilChanged(),
+        filter(list => isNotNullNorUndefined(this.getOrgUnit(list))),
+        take(1),
+      ), list => {
+        this.name = this.getOrgUnit(list)?.name;
+        this.isLoading = false;
+        this._changeDetector.detectChanges();
+      });
       this._store.dispatch(new SharedOrgUnitAction.AddInListById(id, true));
+      this.isLoading = true;
+    } else {
+      this.name = orgUnit.name;
     }
-    this._id = id;
   }
 
   get id(): string {
     return this._id;
   }
 
-  constructor(public readonly _store: Store) {
+  constructor(public readonly _store: Store,
+              private readonly _changeDetector: ChangeDetectorRef) {
     super();
   }
 
-  private mapOrgUnitName(list: OrganizationalUnit[]): string {
+  private getOrgUnit(list: OrganizationalUnit[]): OrganizationalUnit {
     if (isNullOrUndefined(list)) {
-      return StringUtil.stringEmpty;
+      return undefined;
     }
     const organizationalUnit = list.find(o => o.resId === this._id);
     if (isNullOrUndefined(organizationalUnit)) {
-      return StringUtil.stringEmpty;
+      return undefined;
     }
-    return organizationalUnit.name;
+    return organizationalUnit;
   }
 }