refactor: shell app loading spinner + minor improvements in libs (one…

…cx#259) * fix: fix broken figureImage on load error * fix: add missing overflow to menu sidebar container * fix: remove dead code from portal-header * fix: make skeleton loaders full width + add padding * refactor: convert inline error handler to function call * feat: add loading spinner for shell app loading --------- Co-authored-by: Bastian Jakobi <[email protected]>
markuczy · Jun 6, 2024 · e723981 · e723981
1 parent 3282fbb
commit e723981
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -13,9 +13,18 @@
       <div class="figure flex h-2rem w-2rem md:h-3rem md:w-3rem" *ngIf="showFigure">
         <div #previewImage class="figure-image absolute top-0 left-0 right-0 bottom-0">
           <ng-content select="[figureImage]"></ng-content>
-          <img *ngIf="figureImage" [ocxSrc]="figureImage" alt="Figure image" class="w-full" />
+          <img
+            *ngIf="figureImage && !figureImageLoadError"
+            [ocxSrc]="figureImage"
+            alt="Figure image"
+            class="w-full"
+            (error)="handleImageError()"
+          />
         </div>
-        <div class="colorblob flex-1 border-round" *ngIf="previewImage.children.length === 0"></div>
+        <div
+          class="colorblob flex-1 border-round"
+          *ngIf="previewImage.children.length === 0 || figureImageLoadError"
+        ></div>
       </div>
       <ng-template #skeletonBar>
         <div class="header justify-content-evenly">
@@ -25,11 +34,12 @@
       </ng-template>
       <div class="header" *ngIf="!loading; else skeletonBar">
         <h1 id="page-header" *ngIf="!!header">{{ header }}</h1>
-        <h2 id='page-subheader' *ngIf="!!subheader">{{ subheader }}</h2>
+        <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
       </div>
     </div>
     <div class="action-items-wrap mt-2 md:mt-0">
-      <ng-container *ngIf="additionalToolbarContentLeft" [ngTemplateOutlet]="additionalToolbarContentLeft"> </ng-container>
+      <ng-container *ngIf="additionalToolbarContentLeft" [ngTemplateOutlet]="additionalToolbarContentLeft">
+      </ng-container>
 
       <ng-container *ngIf="!disableDefaultActions"> </ng-container>
       <ng-template #skeletonActions>
@@ -87,7 +97,9 @@ <h2 id='page-subheader' *ngIf="!!subheader">{{ subheader }}</h2>
         class="object-info flex flex-row md:flex-column align-items-baseline md:align-items-center justify-content-between"
         *ngFor="let item of objectDetails"
       >
-        <label class="flex font-medium text-600" name="object-detail-label">{{ item.label | dynamicPipe:item.labelPipe }}</label>
+        <label class="flex font-medium text-600" name="object-detail-label"
+          >{{ item.label | dynamicPipe:item.labelPipe }}</label
+        >
         <span
           *ngIf="item.icon || item.value"
           class="flex text-900 mt-2"

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
@@ -124,6 +124,8 @@ export class PageHeaderComponent implements OnInit, OnChanges {
 
   home$!: Observable<HomeItem>
 
+  figureImageLoadError = false;
+
   protected breadcrumbs: BreadcrumbService
 
   constructor(
@@ -173,6 +175,10 @@ export class PageHeaderComponent implements OnInit, OnChanges {
     }
   }
 
+  handleImageError() {
+    this.figureImageLoadError = true
+  }
+
   public generateItemStyle(item: ObjectDetailItem): string {
     let style = ''
     if (item.icon) style = style.concat(style, ' ', 'gap-1 align-items-center')

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
@@ -56,13 +56,6 @@
           </div>
         </ng-template>
       </ocx-slot>
-      <ul class="layout-topbar-items">
-        <!-- Only desktop: Actions (favorites, support, search, ...) as icon buttons -->
-        <ng-container *ocxIfBreakpoint="'desktop'"> </ng-container>
-
-        <!-- Only mobile: Actions (favorites, support, search, ...) as 'more' button + overlay -->
-        <li class="layout-topbar-item" *ocxIfBreakpoint="'mobile'"></li>
-      </ul>
     </div>
   </div>
 </div>
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
@@ -25,10 +25,10 @@
   <p-toast></p-toast>
 
   <div class="menu-wrapper">
-    <div class="layout-menu-container" *ngIf="isStaticalMenuVisible()">
+    <div class="layout-menu-container overflow-auto" *ngIf="isStaticalMenuVisible()">
       <ocx-slot name="onecx-shell-verticalMenu">
         <ng-template #skeleton>
-          <p-skeleton class="w-full h-full mb-4 inline-block" height="35px" width="120px"></p-skeleton>
+          <p-skeleton class="w-full h-full inline-block p-2" height="35px"></p-skeleton>
         </ng-template>
       </ocx-slot>
     </div>
@@ -37,7 +37,7 @@
   <div class="layout-main">
     <div class="layout-content relative">
       <ocx-slot name="onecx-shell-subHeader"></ocx-slot>
-      <ng-container *ngIf="!showContentProvider || (showContentProvider.showContent$ | async)">
+      <ng-container *ngIf="!showContentProvider || (showContentProvider.showContent$ | async); else appLoading">
         <ng-content></ng-content>
         <router-outlet></router-outlet>
       </ng-container>
@@ -52,3 +52,7 @@
 <ng-template #globalError>
   <ocx-shell-error [errCode]="globalErrMsg"></ocx-shell-error>
 </ng-template>
+
+<ng-template #appLoading>
+  <div [ocxLoadingIndicator]="true" class="w-full h-full absolute top-0 left-0"></div>
+</ng-template>
diff --git a/libs/shell-core/src/lib/shell-core.module.ts b/libs/shell-core/src/lib/shell-core.module.ts
@@ -9,9 +9,10 @@ import { PortalFooterComponent } from './components/portal-footer/portal-footer.
 import { HeaderComponent } from './components/portal-header/header.component'
 import { PortalViewportComponent } from './components/portal-viewport/portal-viewport.component'
 import { SkeletonModule } from 'primeng/skeleton'
+import { PortalCoreModule } from '@onecx/portal-integration-angular'
 
 @NgModule({
-  imports: [CommonModule, RouterModule, AngularRemoteComponentsModule, AngularAcceleratorModule, ToastModule, SkeletonModule],
+  imports: [CommonModule, RouterModule, AngularRemoteComponentsModule, AngularAcceleratorModule, ToastModule, SkeletonModule, PortalCoreModule],
   declarations: [PortalViewportComponent, HeaderComponent, PortalFooterComponent, GlobalErrorComponent],
   exports: [PortalViewportComponent, HeaderComponent, PortalFooterComponent, ToastModule, GlobalErrorComponent],
 })