feat: add skeleton loading to onto class items (#1107)

dasch-swiss · Jun 21, 2023 · e3d7a79 · e3d7a79
1 parent 1e8f67d
commit e3d7a79
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git 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/...p/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.html b/...p/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/...p/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.scss b/...p/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
diff --git 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",