Avoid flicker of home page when reloading instances: merge received list of instances with current ones to avoid component recreation.

Author: stuartcaunt

src/app/admin/components/sessions/sessions.component.html

@@ -49,9 +49,11 @@
                 <visa-tab-title-icon><clr-icon shape="grid-view" class="is-solid"></clr-icon></visa-tab-title-icon>
                 <visa-tab-title>Grid view</visa-tab-title>
                 <visa-tab-content>
-                    <div #gridContainer [ngClass]="{ 'admin-container--fullscreen' : isFullScreen()}">
-                        <div class="centered-content-area m-t-20" [hidden]="sessions.length > 0 || !loading">
-                            <clr-spinner [hidden]="!loading"></clr-spinner>
+                    <div #gridContainer class="sessions-content"  [ngClass]="{ 'admin-container--fullscreen' : isFullScreen()}">
+                        <div class="sessions-spinner-outer" [hidden]="!loading">
+                            <div class="sessions-spinner">
+                                <clr-spinner></clr-spinner>
+                            </div>
                         </div>
                         <div class="blankslate" *ngIf="sessions.length === 0 && !loading">
                             <div class="title">

src/app/admin/components/sessions/sessions.component.scss

@@ -97,3 +97,22 @@
         background-color: #ea5f02;
     }
 }
+
+.sessions-content {
+    min-height: 150px;
+}
+
+.sessions-spinner-outer {
+    position: relative;
+    width: 100%;
+}
+
+.sessions-spinner {
+    height: 150px;
+    top: 16px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    z-index: 999999;
+}

src/app/user/home/home.component.html

@@ -58,10 +58,12 @@ <h3>Looks like you don't have any instances</h3>
                     {{ experiment.startDate | date: 'MMM yyyy' }})
                 </ng-option>
             </ng-select>
-            <div class="centered-content-area m-t-20" [hidden]="!loading">
-                <clr-spinner [hidden]="!loading"></clr-spinner>
+            <div class="home-spinner-outer" [hidden]="!loading">
+                <div class="home-spinner">
+                    <clr-spinner></clr-spinner>
+                </div>
             </div>
-            <visa-tabs [hidden]="loading">
+            <visa-tabs>
                 <visa-tab>
                     <visa-tab-title>My instances <span class="label">{{ (instances | instanceFilterPipe: ['OWNER']: selectedExperiment).length }}</span></visa-tab-title>
                     <visa-tab-actions>

src/app/user/home/home.component.scss

@@ -6,3 +6,15 @@
     padding-top: 8px;
     padding-bottom: 8px;
 }
+
+.home-spinner-outer {
+    position: relative;
+    width: 100%;
+}
+
+.home-spinner {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}

src/app/user/home/home.component.ts

@@ -138,7 +138,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     public refresh(): void {
         this.loading = true;
         this.accountService.getInstances().subscribe((instances) => {
-            this.instances = instances;
+            this.mergeInstances(instances);
             this.experiments = [].concat(...instances.map(instance => instance.experiments))
                 .filter((v, i, a) => {
                     return a.findIndex(t => (t.id === v.id)) === i;
@@ -156,6 +156,13 @@ export class HomeComponent implements OnInit, OnDestroy {
         this.refresh$.next();
     }
 
+    private mergeInstances(instances: Instance[]) {
+        const originalMap = new Map(this.instances.map(instance => [instance.id, instance]));
+        this.instances = instances.map(newInstance => {
+            return originalMap.get(newInstance.id) || newInstance;
+        });
+    }
+
     private bindEventGatewayListeners(): void {
         this._gatewayEventSubscriber = this.eventsGateway.subscribe()
             .on('user:instances_changed', _ => {

src/assets/stylesheets/application.scss

@@ -1086,8 +1086,3 @@ $visa-theme: mat.define-light-theme((
     margin: 0 0 10px !important;
 }
 
-.centered-content-area {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}