feat: skeleton loader on landing page (#DEV-3569)

apps/dsp-app/src/app/system/project-tile/project-tile.component.html

@@ -1,4 +1,12 @@
-<a (click)="navigateToProject(project.id)" data-cy="navigate-to-project-button">
+<ng-container *ngIf="isLoading">
+  <div class="project-tile skeleton">
+    <div class="project-tile-content">
+      <div class="title"></div>
+    </div>
+  </div>
+</ng-container>
+
+<a *ngIf="isLoading === false" (click)="navigateToProject(project.id)" data-cy="navigate-to-project-button">
   <div class="project-tile" data-cy="tile">
     <div class="project-tile-content">
       <div class="title">

apps/dsp-app/src/app/system/project-tile/project-tile.component.scss

@@ -3,6 +3,18 @@
 @use '../../../styles/typography' as t;
 @use '../../../styles/responsive' as *;
 
+.skeleton {
+  background: linear-gradient(90deg, $cool_gray_50 33%, $cool_gray_100 50%, $cool_gray_50 66%) #f2f2f2;
+  background-size: 300% 100%;
+  animation: skeleton-loading 2s infinite ease-in-out;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: right;
+  }
+}
+
 .project-tile {
   :hover {
     border-radius: 6px;

apps/dsp-app/src/app/system/project-tile/project-tile.component.ts

@@ -4,21 +4,21 @@ import { StoredProject } from '@dasch-swiss/dsp-js';
 import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { ClearProjectsAction, ClearProjectsMembershipAction } from '@dasch-swiss/vre/shared/app-state';
-import { Actions, Store } from '@ngxs/store';
+import { Store } from '@ngxs/store';
 
 @Component({
   selector: 'app-project-tile',
   templateUrl: './project-tile.component.html',
   styleUrls: ['./project-tile.component.scss'],
 })
 export class ProjectTileComponent {
+  @Input() isLoading = false;
   @Input() project: StoredProject;
   @Input() sysAdmin: boolean; // used to show settings button
 
   constructor(
     private _router: Router,
-    private _store: Store,
-    private _actions: Actions
+    private _store: Store
   ) {}
 
   navigateToProject(id: string) {

apps/dsp-app/src/app/user/overview/overview.component.html

@@ -1,9 +1,20 @@
 <div class="content extra-large middle">
-  <dasch-swiss-app-progress-indicator *ngIf="isProjectsLoading$ | async"></dasch-swiss-app-progress-indicator>
-
   <div class="overview">
+    <div *ngIf="isProjectsLoading$ | async" [@replaceAnimation]>
+      <div class="title-bar admin">
+        <div class="title">
+          <p>Browse Research Projects</p>
+        </div>
+      </div>
+      <div class="project-tiles">
+        <div *ngFor="let item of loadingTiles" class="project-tile-container">
+          <app-project-tile isLoading="true"></app-project-tile>
+        </div>
+      </div>
+    </div>
+
     <!-- user is a system admin -->
-    <div *ngIf="(isSysAdmin$ | async) && (isProjectsLoading$ | async) === false">
+    <div *ngIf="(allProjects$ | async).length > 0 && ((isSysAdmin$ | async) && (isProjectsLoading$ | async) === false)">
       <!-- list all projects -->
       <div class="title-bar admin">
         <div class="title">
@@ -18,32 +29,37 @@
     </div>
     <!-- user is logged in and not a system admin -->
     <div *ngIf="(isSysAdmin$ | async) === false && (user$ | async)">
-      <div class="title-bar">
-        <div class="title">
-          <p>My Projects</p>
+      <ng-container *ngIf="(userActiveProjects$ | async).length > 0">
+        <div class="title-bar">
+          <div class="title">
+            <p>My Projects</p>
+          </div>
         </div>
-      </div>
-      <div class="project-tiles">
-        <div *ngFor="let userProj of userActiveProjects$ | async; trackBy: trackByFn" class="project-tile-container">
-          <app-project-tile [project]="userProj" [sysAdmin]="false"></app-project-tile>
+        <div class="project-tiles">
+          <div *ngFor="let userProj of userActiveProjects$ | async; trackBy: trackByFn" class="project-tile-container">
+            <app-project-tile [project]="userProj" [sysAdmin]="false"></app-project-tile>
+          </div>
         </div>
-      </div>
-      <div class="title-bar other-projects">
-        <div class="title">
-          <p>Browse Other Research Projects</p>
+      </ng-container>
+      <ng-container *ngIf="(userOtherActiveProjects$ | async).length > 0">
+        <div class="title-bar other-projects">
+          <div class="title">
+            <p>Browse Other Research Projects</p>
+          </div>
         </div>
-      </div>
-      <div class="project-tiles">
-        <div
-          *ngFor="let otherProj of userOtherActiveProjects$ | async; trackBy: trackByFn"
-          class="project-tile-container">
-          <app-project-tile [project]="otherProj" [sysAdmin]="false"></app-project-tile>
+        <div class="project-tiles">
+          <div
+            *ngFor="let otherProj of userOtherActiveProjects$ | async; trackBy: trackByFn"
+            class="project-tile-container">
+            <app-project-tile [project]="otherProj" [sysAdmin]="false"></app-project-tile>
+          </div>
         </div>
-      </div>
+      </ng-container>
     </div>
 
     <!-- user is not logged in -->
-    <div *ngIf="((isProjectsLoading$ | async) === false) && user$ | async | isFalsy">
+    <div
+      *ngIf="((allActiveProjects$ | async).length > 0) && (((isProjectsLoading$ | async) === false) && user$ | async | isFalsy)">
       <!-- list all projects -->
       <div class="title-bar admin">
         <div class="title">

apps/dsp-app/src/app/user/overview/overview.component.ts

@@ -6,12 +6,14 @@ import { LoadProjectsAction, ProjectsSelectors, UserSelectors } from '@dasch-swi
 import { Select, Store } from '@ngxs/store';
 import { Observable, combineLatest } from 'rxjs';
 import { filter, take } from 'rxjs/operators';
+import { ReplaceAnimation } from '../../main/animations/replace-animation';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-overview',
   templateUrl: './overview.component.html',
   styleUrls: ['./overview.component.scss'],
+  animations: [ReplaceAnimation.animation],
 })
 export class OverviewComponent implements OnInit {
   @Select(UserSelectors.user) user$: Observable<ReadUser>;
@@ -23,6 +25,8 @@ export class OverviewComponent implements OnInit {
   @Select(ProjectsSelectors.isProjectsLoading) isProjectsLoading$: Observable<boolean>;
   @Select(UserSelectors.isSysAdmin) isSysAdmin$: Observable<boolean>;
 
+  loadingTiles = new Array(8);
+
   constructor(
     private _titleService: Title,
     private _router: Router,