From 659f0f490cd8711be76ee3598801da04bcf1df17 Mon Sep 17 00:00:00 2001
From: domsteinbach <36757218+domsteinbach@users.noreply.github.com>
Date: Tue, 18 Jul 2023 12:03:22 +0200
Subject: [PATCH] feat(remove property menu): add skeleton to mat menu until
 content loaded (#1148)

---
 ...esource-class-property-info.component.html | 25 ++++++++++++++-----
 ...esource-class-property-info.component.scss |  5 ++++
 apps/dsp-app/src/styles.scss                  |  1 +
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.html b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.html
index 2066add706..7ee826f1cd 100644
--- a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.html
+++ b/apps/dsp-app/src/app/project/ontology/resource-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/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.scss b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.scss
index 10571f18b8..765293a485 100644
--- a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-property-info/resource-class-property-info.component.scss
+++ b/apps/dsp-app/src/app/project/ontology/resource-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
index 2bd0a758a8..9972ada1b1 100644
--- 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 {