From 7a1341670cc071b75c1ecac0b2219d32dded751b Mon Sep 17 00:00:00 2001
From: Bastian Jakobi <bastian.jakobi@capgemini.com>
Date: Thu, 25 Apr 2024 12:09:24 +0200
Subject: [PATCH] feat: add skeleton loaders for slot components

---
 .../portal-header/header.component.html         |  2 --
 .../portal-viewport.component.html              | 17 +++++++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/libs/shell-core/src/lib/components/portal-header/header.component.html b/libs/shell-core/src/lib/components/portal-header/header.component.html
index 5f77e90d..7147a918 100644
--- a/libs/shell-core/src/lib/components/portal-header/header.component.html
+++ b/libs/shell-core/src/lib/components/portal-header/header.component.html
@@ -50,13 +50,11 @@
     </div>
     <div class="layout-topbar-actions-right">
       <ocx-slot name="headerRight" class="layout-topbar-items">
-        <div class="flex flex-row justify-content-between w-full gap-3 h-full">
           <ng-template #skeleton>
             <div class="flex align-items-center h-full justify-content-center" style="width: 56px;">
               <p-skeleton shape="circle" size="2.5rem" class="h-full flex align-items-center"></p-skeleton>
             </div>
           </ng-template>
-        </div>
       </ocx-slot>
       <ul class="layout-topbar-items">
         <!-- Only desktop: Actions (favorites, support, search, ...) as icon buttons -->
diff --git a/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.html b/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.html
index 0ee15a08..1bd753e9 100644
--- a/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.html
+++ b/libs/shell-core/src/lib/components/portal-viewport/portal-viewport.component.html
@@ -10,14 +10,27 @@
   [class]="'layout-menu-' + colorScheme + ' layout-topbar-' + topbarTheme"
 >
   <ocx-shell-header [menuButtonTitle]="menuButtonTitle" (menuButtonClick)="onMenuButtonClick($event)">
-    <ocx-slot name="horizontalMenu" *ngIf="isHorizontalMenuVisible()"></ocx-slot>
+    <div *ngIf="isHorizontalMenuVisible()">
+      <ocx-slot name="horizontalMenu">
+        <ng-template #skeleton>
+          <div class="ml-4 flex flex-row gap-4">
+            <p-skeleton class="w-full h-full inline-block" height="35px" width="120px"></p-skeleton>
+            <p-skeleton class="w-full h-full inline-block" height="35px" width="120px"></p-skeleton>
+          </div>
+      </ng-template>
+      </ocx-slot>
+    </div>
   </ocx-shell-header>
 
   <p-toast></p-toast>
 
   <div class="menu-wrapper">
     <div class="layout-menu-container" *ngIf="isStaticalMenuVisible()">
-      <ocx-slot name="menu"></ocx-slot>
+      <ocx-slot name="menu">
+        <ng-template #skeleton>
+            <p-skeleton class="w-full h-full mb-4 inline-block" height="35px" width="120px"></p-skeleton>
+        </ng-template>
+      </ocx-slot>
     </div>
   </div>