chore: add loading indicator in explore other tmpl

src/atlasComponents/parcellationRegion/regionMenu/regionMenu.component.ts

 import { Component, OnDestroy } from "@angular/core";
 import { Store } from "@ngrx/store";
-import { Observable, Subscription } from "rxjs";
+import { merge, Observable, Subject, Subscription } from "rxjs";
 import { RegionBase } from '../region.base'
 import { CONST, ARIA_LABELS } from 'common/constants'
 import { ComponentStore } from "src/viewerModule/componentStore";
+import { distinctUntilChanged, mapTo } from "rxjs/operators";
 
 @Component({
   selector: 'region-menu',
@@ -19,6 +20,19 @@ export class RegionMenuComponent extends RegionBase implements OnDestroy {
 
   public activePanelTitles$: Observable<string[]>
   private activePanelTitles: string[] = []
+
+  public intentToChgTmpl$ = new Subject()
+  public lockOtherTmpl$ = merge(
+    this.selectedTemplate$.pipe(
+      mapTo(false)
+    ),
+    this.intentToChgTmpl$.pipe(
+      mapTo(true)
+    )
+  ).pipe(
+    distinctUntilChanged()
+  )
+
   constructor(
     store$: Store<any>,
     private viewerCmpLocalUiStore: ComponentStore<{ activePanelsTitle: string[] }>,

src/atlasComponents/parcellationRegion/regionMenu/regionMenu.style.css

@@ -20,3 +20,35 @@ mat-icon
   font-size: 95%;
   line-height: normal;
 }
+
+: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" ".";
+}
+
+.loading-overlay > .spinner
+{
+    grid-column: 2;
+    grid-row: 2;
+}

src/atlasComponents/parcellationRegion/regionMenu/regionMenu.template.html

@@ -78,7 +78,8 @@
     <ng-template #exploreInOtherTmpl>
       <mat-grid-list cols="3"
         rowHeight="2:3"
-        gutterSize="16">
+        gutterSize="16"
+        class="position-relative">
         <mat-grid-tile *ngFor="let otherTmpl of otherTmpls">
           
           <div [hidden]
@@ -86,6 +87,7 @@
               [iav-dataset-show-dataset-dialog-name]="otherTmpl.originDatainfos[0]?.name"
               [iav-dataset-show-dataset-dialog-description]="otherTmpl.originDatainfos[0]?.description"
               [iav-dataset-show-dataset-dialog-urls]="otherTmpl.originDatainfos[0]?.urls"
+              [iav-dataset-show-dataset-dialog-ignore-overwrite]="true"
               #kgInfo="iavDatasetShowDatasetDialog">
           </div>
           <tile-cmp [tile-image-src]="otherTmpl | getTemplatePreviewUrl"
@@ -93,15 +95,19 @@
               tile-image-alt="Preview of this tile"
               [tile-text]="otherTmpl.displayName || otherTmpl.name"
               [tile-show-info]="otherTmpl.originDatainfos?.length > 0"
-              [tile-image-darktheme]="otherTmpl.darktheme"
+              [tile-image-darktheme]="otherTmpl | templateIsDarkTheme"
               [tile-selected]="(selectedTemplate$ | async | getProperty : '@id') === otherTmpl['@id']"
-              (tile-on-click)="tileCmp.selected || changeView(otherTmpl)"
+              (tile-on-click)="(tileCmp.selected || changeView(otherTmpl)); (tileCmp.selected || intentToChgTmpl$.next(true))"
               (tile-on-info-click)="kgInfo && kgInfo.onClick()"
               #tileCmp="tileCmp">
           </tile-cmp>
         </mat-grid-tile>
       </mat-grid-list>
 
+      <div *ngIf="lockOtherTmpl$ | async" class="loading-overlay">
+        <spinner-cmp class="spinner"></spinner-cmp>
+      </div>
+
     </ng-template>
 
     <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {

src/atlasComponents/regionalFeatures/bsFeatures/kgDataset/showDataset/showDataset.directive.ts

@@ -39,6 +39,9 @@ export class ShowDatasetDialogDirective{
     doi: string
   }[] = []
 
+  @Input('iav-dataset-show-dataset-dialog-ignore-overwrite')
+  ignoreOverwrite = false
+
   @Input('iav-dataset-show-dataset-dialog-contexted-region')
   region: TSiibraRegion & TContextRegion
 
@@ -67,7 +70,7 @@ export class ShowDatasetDialogDirective{
       return this.snackbar.open(`Cannot show dataset. Neither fullId nor kgId provided.`)
     }
 
-    if (this.overwriteFn) {
+    if (!this.ignoreOverwrite && this.overwriteFn) {
       return this.overwriteFn(data)
     }
 

src/atlasComponents/template/module.ts

 import { NgModule } from "@angular/core";
 import { GetTemplatePreviewUrlPipe } from "./getTemplatePreviewUrl.pipe";
+import { TemplateIsDarkThemePipe } from "./templateIsDarkTheme.pipe";
 
 @NgModule({
   imports: [],
-  declarations: [GetTemplatePreviewUrlPipe],
-  exports: [GetTemplatePreviewUrlPipe]
+  declarations: [
+    GetTemplatePreviewUrlPipe,
+    TemplateIsDarkThemePipe,
+  ],
+  exports: [
+    GetTemplatePreviewUrlPipe,
+    TemplateIsDarkThemePipe,
+  ]
 })
 
 export class SiibraExplorerTemplateModule{}
\ No newline at end of file

src/atlasComponents/template/templateIsDarkTheme.pipe.ts

+import { OnDestroy, Pipe, PipeTransform } from "@angular/core";
+import { select, Store } from "@ngrx/store";
+import { Subscription } from "rxjs";
+import { viewerStateSelectedTemplateFullInfoSelector } from "src/services/state/viewerState/selectors";
+import { IHasId } from "src/util/interfaces";
+
+@Pipe({
+  name: 'templateIsDarkTheme',
+  pure: true,
+})
+
+export class TemplateIsDarkThemePipe implements OnDestroy, PipeTransform{
+
+  private templateFullInfo: any[] = []
+  constructor(store: Store<any>){
+    this.sub.push(
+      store.pipe(
+        select(viewerStateSelectedTemplateFullInfoSelector)
+      ).subscribe(val => this.templateFullInfo = val)
+    )
+  }
+
+  private sub: Subscription[] = []
+
+  ngOnDestroy(){
+    while(this.sub.length) this.sub.pop().unsubscribe()
+  }
+
+  public transform(template: IHasId): boolean{
+    const found = this.templateFullInfo.find(t => t['@id'] === template["@id"])
+    return found && found.darktheme
+  }
+}
\ No newline at end of file

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

@@ -33,7 +33,7 @@
     grid-template-areas: "." "vertical-center" ".";
 }
 
-.spinner
+.loading-overlay > .spinner
 {
     grid-column: 2;
     grid-row: 2;