Add spinner delay to aviod page overload at start

paulscherrerinstitute · Feb 29, 2024 · fba7df6 · fba7df6
1 parent 29e57ed
commit fba7df6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.html b/scilog/src/app/logbook/core/search-window/search-window.component.html
@@ -61,7 +61,7 @@
     <div class="searchResults" *ngIf=showResults>
         <div class="header">
             Logbook view:
-            <mat-spinner *ngIf="!searchScrollService.isLoaded" class="spinner"></mat-spinner>
+            <mat-spinner *ngIf="!searchScrollService.isLoaded" [@spinner] class="spinner"></mat-spinner>
             <div class="searchContainer">
                 <div *uiScroll="let snippet of searchScrollService.datasource; let i = index">
                     <snippet [snippet]="snippet" [updatedAt]="snippet.updatedAt" [index]=i+1 [config]="config"

diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.ts b/scilog/src/app/logbook/core/search-window/search-window.component.ts
@@ -9,6 +9,7 @@ import { LogbookInfoService } from '@shared/logbook-info.service';
 import { TagService } from '@shared/tag.service';
 import { ScrollToElementService } from '@shared/scroll-to-element.service';
 import { Hotkeys } from '@shared/hotkeys.service';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 interface SearchResult {
   location: string[],
@@ -23,7 +24,15 @@ interface SearchResult {
   selector: 'search-window',
   templateUrl: './search-window.component.html',
   styleUrls: ['./search-window.component.css'],
-  providers: [SearchScrollService]
+  providers: [SearchScrollService],
+  animations: [
+    trigger('spinner', [
+      transition(':enter', [
+        style({opacity: 0}), 
+        animate('1ms 0.2s ease-out', style({opacity: 1}))
+      ])
+    ]),
+  ]
 })
 export class SearchWindowComponent implements OnInit {
 

diff --git a/scilog/src/app/overview/overview.component.html b/scilog/src/app/overview/overview.component.html
@@ -17,7 +17,7 @@ <h1>Logbooks</h1>
       <mat-button-toggle value="logbook-headline"><mat-icon>view_headline</mat-icon></mat-button-toggle>
     </mat-button-toggle-group>
     <button (click)='addCollectionLogbook("logbook")'>Add logbook</button><br>
-    <mat-spinner *ngIf="!logbookIconScrollService.isLoaded" class="spinner"></mat-spinner>
+    <mat-spinner *ngIf="!logbookIconScrollService.isLoaded" [@spinner] class="spinner"></mat-spinner>
     <div class="logbook-container" (resized)="onResized($event)" #logbookContainer>
       <div *uiScroll="let logbookGroup of logbookIconScrollService.datasource">
         <span *ngFor="let logbook of logbookGroup">

diff --git a/scilog/src/app/overview/overview.component.ts b/scilog/src/app/overview/overview.component.ts
@@ -12,6 +12,7 @@ import { LogbookDataService } from '@shared/remote-data.service';
 import { LogbookIconScrollService } from './logbook-icon-scroll-service.service';
 import { debounceTime } from 'rxjs/operators';
 import { ResizedEvent } from '@shared/directives/resized.directive';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 enum ContentType {
   COLLECTION = 'collection',
@@ -24,8 +25,15 @@ export type MatCardType = 'logbook-module' | 'logbook-headline';
   selector: 'app-overview',
   templateUrl: './overview.component.html',
   styleUrls: ['./overview.component.css'],
-  providers: [LogbookIconScrollService]
-
+  providers: [LogbookIconScrollService],
+  animations: [
+    trigger('spinner', [
+      transition(':enter', [
+        style({opacity: 0}), 
+        animate('1ms 0.2s ease-out', style({opacity: 1}))
+      ])
+    ]),
+  ]
 })
 export class OverviewComponent implements OnInit {