ui: show loading indications when parc is loading

- via parc chips (different versions)
- via tmpl parc selection panel

src/atlasComponents/sapiViews/core/atlas/tmplParcSelector/tmplParcSelector.component.ts

@@ -104,13 +104,20 @@ export class SapiViewsCoreAtlasAtlasTmplParcSelector {
     )
   )
 
-  private showOverlayIntent$ = new Subject()
+  private showOverlayIntentByTemplate$ = new Subject()
+  private showOverlayIntentByParcellation$ = new Subject()
   public showLoadingOverlay$ = merge(
-    this.showOverlayIntent$.pipe(
+    this.showOverlayIntentByTemplate$.pipe(
       mapTo(true)
     ),
     this.selectedTemplate$.pipe(
       mapTo(false)
+    ),
+    this.showOverlayIntentByParcellation$.pipe(
+      mapTo(true)
+    ),
+    this.selectedParcellation$.pipe(
+      mapTo(false)
     )
   ).pipe(
     distinctUntilChanged(),
@@ -180,7 +187,7 @@ export class SapiViewsCoreAtlasAtlasTmplParcSelector {
   }
 
   selectTemplate(tmpl: SapiSpaceModel) {
-    this.showOverlayIntent$.next(true)
+    this.showOverlayIntentByTemplate$.next(true)
 
     this.store$.dispatch(
       atlasSelection.actions.selectTemplate({
@@ -190,6 +197,7 @@ export class SapiViewsCoreAtlasAtlasTmplParcSelector {
   }
 
   selectParcellation(parc: SapiParcellationModel) {
+    this.showOverlayIntentByParcellation$.next(true)
 
     this.store$.dispatch(
       atlasSelection.actions.selectParcellation({

src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts

-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core";
-import { Observable } from "rxjs";
+import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core";
+import { concat, Observable, of, timer } from "rxjs";
 import { SapiParcellationModel } from "src/atlasComponents/sapi/type";
 import { ParcellationVisibilityService } from "../parcellationVis.service";
 import { ARIA_LABELS } from "common/constants"
 import { getTraverseFunctions } from "../parcellationVersion.pipe";
+import { mapTo, shareReplay, switchMap } from "rxjs/operators";
 
 @Component({
   selector: `sxplr-sapiviews-core-parcellation-smartchip`,
@@ -64,6 +65,16 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges
     }
   }
 
+  loadingParc$: Observable<SapiParcellationModel> = this.onSelectParcellation.pipe(
+    switchMap(parc => concat(
+      of(parc),
+      timer(5000).pipe(
+        mapTo(null)
+      ),
+    )),
+    shareReplay(1),
+  )
+
   parcellationVisibility$: Observable<boolean> = this.svc.visibility$
 
   toggleParcellationVisibility(){
@@ -75,7 +86,7 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges
   }
 
   selectParcellation(parc: SapiParcellationModel){
-    if (parc === this.parcellation) return
+    if (this.trackByFn(parc) === this.trackByFn(this.parcellation)) return
     this.onSelectParcellation.emit(parc)
   }
 

src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.style.css

+.otherversion-wrapper
+{
+  position: relative;
+  overflow: hidden;
+}
+
+.otherversion-wrapper.loading > sxplr-sapiviews-core-parcellation-chip
+{
+  animation: blink 500ms ease-in-out infinite alternate;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+
+.otherversion-wrapper.loading > .spinner-container
+{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+}
+
+.otherversion-wrapper.loading > .spinner-container > spinner-cmp
+{
+  margin: 0.5rem;
+}

src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html

@@ -3,12 +3,25 @@
   class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
   <div (iav-outsideClick)="menuTrigger.closeMenu()">
 
-    <sxplr-sapiviews-core-parcellation-chip *ngFor="let parc of otherVersions"
-      [sxplr-sapiviews-core-parcellation-chip-parcellation]="parc"
-      [sxplr-sapiviews-core-parcellation-chip-color]="(parcellation | equality : parc : trackByFn) ? 'primary' : 'default'"
-      (sxplr-sapiviews-core-parcellation-chip-onclick)="selectParcellation(parc)">
+    <div *ngFor="let parc of otherVersions"
+      class="otherversion-wrapper"
+      [ngClass]="{
+        'loading': (loadingParc$ | async) === parc
+      }">
 
-    </sxplr-sapiviews-core-parcellation-chip>
+
+      <sxplr-sapiviews-core-parcellation-chip 
+        [sxplr-sapiviews-core-parcellation-chip-parcellation]="parc"
+        [sxplr-sapiviews-core-parcellation-chip-color]="(parcellation | equality : parc : trackByFn) ? 'primary' : 'default'"
+        (sxplr-sapiviews-core-parcellation-chip-onclick)="selectParcellation(parc)">
+
+      </sxplr-sapiviews-core-parcellation-chip>
+
+      <div class="spinner-container" *ngIf="(loadingParc$ | async) === parc">
+        <spinner-cmp>
+        </spinner-cmp>
+      </div>
+    </div>
   </div>
   
 </mat-menu>