feat(remove property menu): add skeleton to mat menu until content lo…

…aded (#1148)
dasch-swiss · Jul 18, 2023 · 659f0f4 · 659f0f4
1 parent e2d1582
commit 659f0f4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/...ource-class-info/resource-class-property-info/resource-class-property-info.component.html b/...ource-class-info/resource-class-property-info/resource-class-property-info.component.html
@@ -18,12 +18,25 @@
                 <mat-icon [matMenuTriggerFor]="classInfoMenu" class="menu-icon-button" (click)="canBeRemovedFromClass()">more_vert</mat-icon>
             </span>
             <mat-menu #classInfoMenu="matMenu">
-                <button mat-menu-item
-                        [disabled] = "!propCanBeRemovedFromClass"
-                        (click)="removePropertyFromClass.emit({iri: propDef.id, label: propDef.label})">
-                    <mat-icon>link_off</mat-icon>
-                    <span>remove property from class</span>
-                </button>
+                <div class='remove-menu-wrapper'>
+                    <button mat-menu-item
+                            [disabled] = "!propCanBeRemovedFromClass"
+                            (click)="removePropertyFromClass.emit({iri: propDef.id, label: propDef.label})">
+                        <mat-icon>link_off</mat-icon>
+                        <ngx-skeleton-loader
+                            *ngIf="propCanBeRemovedFromClass === undefined || propCanBeRemovedFromClass === null"
+                            count="1"
+                            appearance="line"
+                            class='skeleton'
+                            [theme]="{
+                        'margin-bottom': 0,
+                        'vertical-align': 'middle',
+                        'min-width' : '16em'
+                    }">
+                        </ngx-skeleton-loader>
+                        <span *ngIf="propCanBeRemovedFromClass !== undefined">remove property from class</span>
+                    </button>
+                </div>
             </mat-menu>
         </div>
     </div>

diff --git a/...ource-class-info/resource-class-property-info/resource-class-property-info.component.scss b/...ource-class-info/resource-class-property-info/resource-class-property-info.component.scss
@@ -64,3 +64,8 @@
   font-size: medium;
   cursor: pointer;
 }
+
+.remove-menu-wrapper {
+  min-width: 18em;
+  width: 18em;
+}
diff --git a/apps/dsp-app/src/styles.scss b/apps/dsp-app/src/styles.scss
@@ -185,6 +185,7 @@ button.space-reducer {
 
 .mat-mdc-menu-panel {
   min-height: 48px !important;
+  max-width: 400px !important;
 }
 
 .full-size-dialog {