From 1219599708494aa5e29ca5450c0551f223ab1c77 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Mon, 5 Jul 2021 11:49:48 +0200
Subject: [PATCH] feat: better display of region loading
---
.../regionMenu/regionMenu.template.html | 15 +++++++++++++++
src/viewerModule/viewerCmp/viewerCmp.component.ts | 4 +++-
.../viewerCmp/viewerCmp.template.html | 10 ++++------
3 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/atlasComponents/parcellationRegion/regionMenu/regionMenu.template.html b/src/atlasComponents/parcellationRegion/regionMenu/regionMenu.template.html
index 20baf5d26..039b2cdb7 100644
--- a/src/atlasComponents/parcellationRegion/regionMenu/regionMenu.template.html
+++ b/src/atlasComponents/parcellationRegion/regionMenu/regionMenu.template.html
@@ -1,3 +1,5 @@
+<ng-template [ngIf]="region">
+
<mat-card class="mat-elevation-z4">
<!-- rgbDarkmode must be checked for strict equality to true/false
as if rgb is undefined, rgbDarkmode will be null/undefined
@@ -218,3 +220,16 @@
</ng-template>
</mat-expansion-panel>
</ng-template>
+</ng-template>
+
+
+<ng-template [ngIf]="!region">
+ <mat-card class="mat-elevation-z4">
+ <h1 class="mat-h1 sidenav-cover-header-container">
+ <spinner-cmp class="d-inline-block"></spinner-cmp>
+ <span class="text-muted">
+ Loading region
+ </span>
+ </h1>
+ </mat-card>
+</ng-template>
\ No newline at end of file
diff --git a/src/viewerModule/viewerCmp/viewerCmp.component.ts b/src/viewerModule/viewerCmp/viewerCmp.component.ts
index 3d7d37f69..9c96eaa06 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.component.ts
+++ b/src/viewerModule/viewerCmp/viewerCmp.component.ts
@@ -1,7 +1,7 @@
import { Component, ElementRef, Inject, Input, OnDestroy, Optional, TemplateRef, ViewChild } from "@angular/core";
import { select, Store } from "@ngrx/store";
import {combineLatest, Observable, of, Subject, Subscription} from "rxjs";
-import {distinctUntilChanged, filter, map, shareReplay, startWith, switchMap } from "rxjs/operators";
+import {catchError, distinctUntilChanged, filter, map, shareReplay, startWith, switchMap } from "rxjs/operators";
import { viewerStateSetSelectedRegions } from "src/services/state/viewerState/actions";
import {
viewerStateContextedSelectedRegionsSelector,
@@ -77,6 +77,8 @@ import { ContextMenuService, TContextMenuReg } from "src/contextMenuModule";
context
}
}),
+ // in case detailed requests
+ catchError((err, obs) => of(r[0])),
shareReplay(1),
)
})
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index bfcd94378..2092d5171 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -474,12 +474,10 @@
<!-- single region tmpl -->
<ng-template #singleRegionTmpl let-region="region">
<!-- region detail -->
- <ng-container *ngIf="region; else regionPlaceholderTmpl">
- <region-menu
- [region]="region"
- class="flex-grow-1 bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
- </region-menu>
- </ng-container>
+ <region-menu
+ [region]="region"
+ class="flex-grow-1 bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
+ </region-menu>
</ng-template>
--
GitLab