Merged in task/dspace-cris-2024_02_x/DSC-2308 (pull request DSpace#5007)

[DSC-2308] add: skeleton loader on browse elements sub components

Approved-by: Andrea Barbasso

Author: Francesco Mauto

src/app/shared/browse-most-elements/abstract-browse-elements.component.ts

@@ -1,4 +1,4 @@
-import { isPlatformServer } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
 import {
   Component,
   inject,
@@ -12,6 +12,7 @@ import {
   mergeMap,
   Observable,
 } from 'rxjs';
+import { tap } from 'rxjs/operators';
 
 import { APP_CONFIG } from '../../../config/app-config.interface';
 import { SearchManager } from '../../core/browse/search-manager';
@@ -88,12 +89,18 @@ export abstract class AbstractBrowseElementsComponent implements OnInit, OnChang
 
   searchResultArray$: Observable<DSpaceObject[]>;
 
+  isLoading = true;
+
+  isBrowser: boolean;
+
   ngOnChanges() {
     this.paginatedSearchOptions$?.next(this.paginatedSearchOptions);
   }
 
   ngOnInit() {
-    if (isPlatformServer(this.platformId)) {
+    this.isBrowser = isPlatformBrowser(this.platformId);
+
+    if (!this.isBrowser) {
       return;
     }
     const followLinks = [];
@@ -121,6 +128,9 @@ export abstract class AbstractBrowseElementsComponent implements OnInit, OnChang
       toDSpaceObjectListRD(),
       getRemoteDataPayload(),
       getPaginatedListPayload(),
+      tap(() => {
+        this.isLoading = false;
+      }),
     );
   }
 

src/app/shared/browse-most-elements/default-browse-elements/default-browse-elements.component.html

@@ -1,20 +1,36 @@
 <div class="m-2">
-  <ng-container *ngIf="(searchResults$ | async) as searchResults">
-      <ul *ngIf="searchResults?.hasSucceeded" class="list-unstyled">
-          <li *ngFor="let object of searchResults?.payload?.page; let i = index; let last = last" class="mt-4 mb-4 d-flex" [class.border-bottom]="last !== true">
-              <ds-listable-object-component-loader [context]="context"
-                                                   [index]="i"
-                                                   [listID]="paginatedSearchOptions.configuration"
-                                                   [object]="object"
-                                                   [showMetrics]="showMetrics"
-                                                   [showLabel]="showLabel"
-                                                   [showThumbnails]="showThumbnails"
-                                                   [viewMode]="paginatedSearchOptions.view"></ds-listable-object-component-loader>
-          </li>
-      </ul>
-      <div *ngIf="searchResults?.hasFailed">
-          {{ 'remote.error' | translate }}
-      </div>
+  <ng-container *ngIf="(searchResults$ | async) as searchResults; else skeleton">
+    <ul *ngIf="searchResults?.hasSucceeded" class="list-unstyled">
+      <li *ngFor="let object of searchResults?.payload?.page; let i = index; let last = last" class="mt-4 mb-4 d-flex" [class.border-bottom]="last !== true">
+        <ds-listable-object-component-loader [context]="context"
+                                             [index]="i"
+                                             [listID]="paginatedSearchOptions.configuration"
+                                             [object]="object"
+                                             [showMetrics]="showMetrics"
+                                             [showLabel]="showLabel"
+                                             [showThumbnails]="showThumbnails"
+                                             [viewMode]="paginatedSearchOptions.view"></ds-listable-object-component-loader>
+      </li>
+    </ul>
+    <div *ngIf="searchResults?.hasFailed">
+      {{ 'remote.error' | translate }}
+    </div>
   </ng-container>
-  <ds-loading *ngIf="(searchResults$ | async) === null || (searchResults$ | async) === undefined"></ds-loading>
+  <ng-template #skeleton>
+    <div *ngFor="let item of skeletonItems" class="skeleton-row row my-4">
+      <div *ngIf="showThumbnails" class="col-3 col-md-2">
+        <div class="thumbnail-skeleton">
+          <ngx-skeleton-loader></ngx-skeleton-loader>
+        </div>
+      </div>
+      <div [class.col-9]="showThumbnails" [class.col-md-10]="showThumbnails" [class.col-12]="!showThumbnails">
+        <div class="badge-skeleton">
+          <ngx-skeleton-loader></ngx-skeleton-loader>
+        </div>
+        <div class="text-skeleton">
+          <ngx-skeleton-loader [count]="2"></ngx-skeleton-loader>
+        </div>
+      </div>
+    </div>
+  </ng-template>
 </div>

src/app/shared/browse-most-elements/default-browse-elements/default-browse-elements.component.scss

@@ -0,0 +1,37 @@
+:host ::ng-deep {
+  .skeleton-row {
+    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
+    padding-bottom: 1rem;
+  }
+
+  .thumbnail-skeleton {
+    max-width: var(--ds-thumbnail-max-width, 100%);
+    height: 100%;
+
+    ngx-skeleton-loader .skeleton-loader {
+      border-radius: 0;
+      height: 80px;
+      width: 100%;
+    }
+  }
+
+  .badge-skeleton {
+    ngx-skeleton-loader .skeleton-loader {
+      height: var(--ds-search-skeleton-text-height, 20px);
+      width: var(--ds-search-skeleton-badge-width, 75px);
+    }
+  }
+
+  .text-skeleton {
+    margin-top: 0.5rem;
+
+    ngx-skeleton-loader .skeleton-loader {
+      height: var(--ds-search-skeleton-text-height, 20px);
+    }
+  }
+
+  ngx-skeleton-loader .skeleton-loader {
+    background-color: var(--bs-light, #f8f9fa);
+    box-shadow: none;
+  }
+}

src/app/shared/browse-most-elements/default-browse-elements/default-browse-elements.component.ts

@@ -9,8 +9,8 @@ import {
   OnInit,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { ThemedLoadingComponent } from '../../loading/themed-loading.component';
 import { ListableObjectComponentLoaderComponent } from '../../object-collection/shared/listable-object/listable-object-component-loader.component';
 import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.component';
 
@@ -22,7 +22,7 @@ import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.com
   imports: [
     ListableObjectComponentLoaderComponent,
     TranslateModule,
-    ThemedLoadingComponent,
+    NgxSkeletonLoaderModule,
     AsyncPipe,
     NgIf,
     NgForOf,
@@ -33,9 +33,19 @@ export class DefaultBrowseElementsComponent extends AbstractBrowseElementsCompon
   protected followMetricsLink: boolean;
   protected followThumbnailLink: boolean;
 
+  /**
+   * Array used to render skeleton placeholder items.
+   * Length matches the configured page size.
+   */
+  skeletonItems: number[];
+
   ngOnInit() {
     this.followMetricsLink = this.showMetrics ?? this.appConfig.browseBy.showMetrics;
     this.followThumbnailLink = this.showThumbnails ?? this.appConfig.browseBy.showThumbnails;
+    this.skeletonItems = Array.from(
+      { length: this.paginatedSearchOptions?.pagination?.pageSize ?? 5 },
+      (_, i) => i,
+    );
     super.ngOnInit();
   }
 }