From e3d7a790b581514e2ca7024b615f6b52bd3ff963 Mon Sep 17 00:00:00 2001
From: Mike Delez <60604010+mdelez@users.noreply.github.com>
Date: Wed, 21 Jun 2023 09:44:38 +0200
Subject: [PATCH] feat: add skeleton loading to onto class items (#1107)

---
 apps/dsp-app/src/app/app.module.ts            |  2 ++
 .../ontology-class-item.component.html        | 11 +++++++-
 .../ontology-class-item.component.scss        |  5 ++++
 package-lock.json                             | 25 +++++++++++++++++++
 package.json                                  |  1 +
 5 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/apps/dsp-app/src/app/app.module.ts b/apps/dsp-app/src/app/app.module.ts
index 7bd6170388..767127a5fd 100644
--- a/apps/dsp-app/src/app/app.module.ts
+++ b/apps/dsp-app/src/app/app.module.ts
@@ -176,6 +176,7 @@ import {
     buildTagFactory,
     BuildTagToken,
 } from '@dasch-swiss/vre/shared/app-config';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {
@@ -344,6 +345,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
         HttpClientModule,
         MaterialModule,
         MatJDNConvertibleCalendarDateAdapterModule,
+        NgxSkeletonLoaderModule,
         PdfViewerModule,
         ReactiveFormsModule,
         TranslateModule.forRoot({
diff --git a/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.html b/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.html
index dcb4ff4caa..f96a1b025e 100644
--- a/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.html
+++ b/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.html
@@ -5,7 +5,16 @@
                  [matTooltipDisabled]="resClass.label.length < MAX_LABEL_CHAR">{{trimLabel(resClass.label)}}</div>
             <div class="entry-container">
                 <mat-icon>{{icon}}</mat-icon>
-                <div class="entry">{{results | i18nPlural: itemPluralMapping['entry']}}</div>
+                <ngx-skeleton-loader
+                    *ngIf="results === undefined"
+                    count="1"
+                    appearance="line"
+                    [theme]="{
+                        'margin-bottom': 0,
+                        'vertical-align': 'middle'
+                    }">
+                </ngx-skeleton-loader>
+                <div *ngIf="results !== undefined" class="entry">{{results | i18nPlural: itemPluralMapping['entry']}}</div>
             </div>
         </div>
         <div class="icon link" *ngIf="projectMember" [routerLink]="link + '/add'">
diff --git a/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.scss b/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.scss
index 0072671309..0d45c2d4bc 100644
--- a/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.scss
+++ b/apps/dsp-app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.scss
@@ -36,6 +36,11 @@
         align-items: center;
         gap: 5px;
 
+        ngx-skeleton-loader {
+          width: 100%;
+          margin-right: 5%;
+        }
+
         .entry {
           font-size: 20px;
         }
diff --git a/package-lock.json b/package-lock.json
index 10656c093a..139c918f07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "moment": "^2.29.4",
         "ng2-pdf-viewer": "^7.0.2",
         "ngx-color-picker": "^12.0.1",
+        "ngx-skeleton-loader": "^7.0.0",
         "openseadragon": "3.0.0",
         "rollbar": "^2.25.0",
         "rxjs": "~6.6.7",
@@ -20438,6 +20439,19 @@
         "@angular/forms": ">=9.0.0"
       }
     },
+    "node_modules/ngx-skeleton-loader": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-skeleton-loader/-/ngx-skeleton-loader-7.0.0.tgz",
+      "integrity": "sha512-myc6GNcNhyksZrimIFkCxeihi0kQ8JhQVZiGbtiIv4gYrnnRk5nXbs3kYitK8E8OstHG+jlsmRofqGBxuIsYTA==",
+      "dependencies": {
+        "perf-marks": "^1.13.4",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=8.0.0",
+        "@angular/core": ">=8.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -21791,6 +21805,17 @@
         }
       }
     },
+    "node_modules/perf-marks": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/perf-marks/-/perf-marks-1.14.2.tgz",
+      "integrity": "sha512-N0/bQcuTlETpgox/DsXS1voGjqaoamMoiyhncgeW3rSHy/qw8URVgmPRYfFDQns/+C6yFUHDbeSBGL7ixT6Y4A==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
diff --git a/package.json b/package.json
index 1c5fb062f6..cad447fe84 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "moment": "^2.29.4",
     "ng2-pdf-viewer": "^7.0.2",
     "ngx-color-picker": "^12.0.1",
+    "ngx-skeleton-loader": "^7.0.0",
     "openseadragon": "3.0.0",
     "rollbar": "^2.25.0",
     "rxjs": "~6.6.7",