chore: add loading indicator to template changes

src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts

 import { Component, OnInit, ViewChildren, QueryList, HostBinding, ViewChild, ElementRef, OnDestroy } from "@angular/core";
 import { select, Store } from "@ngrx/store";
-import { distinctUntilChanged, map, withLatestFrom, shareReplay } from "rxjs/operators";
-import { Observable, Subscription } from "rxjs";
+import { distinctUntilChanged, map, withLatestFrom, shareReplay, mapTo, tap } from "rxjs/operators";
+import { merge, Observable, Subject, Subscription } from "rxjs";
 import { viewerStateSelectTemplateWithId, viewerStateToggleLayer } from "src/services/state/viewerState.store.helper";
 import { MatMenuTrigger } from "@angular/material/menu";
 import { viewerStateGetSelectedAtlas, viewerStateAtlasLatestParcellationSelector, viewerStateSelectedTemplateFullInfoSelector, viewerStateSelectedTemplatePureSelector, viewerStateSelectedParcellationSelector } from "src/services/state/viewerState/selectors";
@@ -77,6 +77,19 @@ export class AtlasLayerSelector implements OnInit, OnDestroy {
       return fullInfoTemplates.find(t => t['@id'] === selectedTmpl['@id'])
     })
   )
+  private showOverlayIntent$ = new Subject()
+  public showLoadingOverlay$ = merge(
+    this.showOverlayIntent$.pipe(
+      mapTo(true)
+    ),
+    this.selectedTemplate$.pipe(
+      mapTo(false)
+    )
+  ).pipe(
+    distinctUntilChanged(),
+    tap(val => console.log(val))
+  )
+
   public selectedParcellation$ = this.store$.pipe(
     select(viewerStateSelectedParcellationSelector),
   )
@@ -111,6 +124,7 @@ export class AtlasLayerSelector implements OnInit, OnDestroy {
   }
 
   selectTemplatewithId(templateId: string) {
+    this.showOverlayIntent$.next(true)
     this.store$.dispatch(viewerStateSelectTemplateWithId({
       payload: {
         '@id': templateId

src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.style.css

@@ -6,3 +6,35 @@
     bottom: 4rem;
     z-index: 5;
 }
+
+:host-context([darktheme="true"]) .loading-overlay
+{
+    background-color: rgba(10, 10, 10, 0.8);
+}
+
+.loading-overlay
+{
+    background-color: rgba(250, 250, 250, 0.8);
+}
+
+.loading-overlay
+{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    font-size: 200%;
+
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 1fr auto 1fr;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-areas: "." "vertical-center" ".";
+}
+
+.spinner
+{
+    grid-column: 2;
+    grid-row: 2;
+}

src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html

@@ -104,6 +104,11 @@
             </mat-grid-tile>
         </mat-grid-list>
     </mat-card-content>
+
+    <div [hidden]="!(showLoadingOverlay$ | async)"
+        class="loading-overlay">
+        <spinner-cmp class="spinner"></spinner-cmp>
+    </div>
 </mat-card>
 
 <!-- place holder when not expanded -->