[US TRTL-589] Archive app right panel redesign

ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html

@@ -7,7 +7,7 @@
     </div>
 
     <!-- if we have a one line title (25 chars), then apply a top margin -->
-    <div class="title" [class.mt-3]="title?.length < 26">
+    <div *ngIf="!loading; else spinner" class="title" [class.mt-3]="title?.length < 26">
       <i class="vitamui-icon {{icon}}"
         [ngClass]="{
           'status-badge-green': badge === 'green',
@@ -27,3 +27,9 @@
     </div>
   </div>
 </div>
+
+<ng-template #spinner>
+  <div class="d-flex justify-content-center">
+    <mat-spinner class="vitamui-spinner medium"></mat-spinner>
+  </div>
+</ng-template>
\ No newline at end of file

ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.ts

@@ -10,6 +10,8 @@ export class VitamuiSidenavHeaderComponent {
 
   @Input() icon: string;
 
+  @Input() loading: boolean;
+
   @Input() badge: 'green' | 'grey' | 'orange';
 
   @Input() title: string;

ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.module.ts

@@ -37,12 +37,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { VitamuiSidenavHeaderComponent } from './vitamui-sidenav-header.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    MatProgressSpinnerModule
   ],
   declarations: [VitamuiSidenavHeaderComponent],
   exports: [VitamuiSidenavHeaderComponent]

ui/ui-frontend-common/src/sass/_input.scss

@@ -58,6 +58,7 @@ $anim-timing: 150ms ease-out;
         line-height: 18px;
         transform-origin: left;
         transition: margin $anim-timing;
+        width: 100%;
     }
 
     textarea {

ui/ui-frontend-common/src/sass/material/_preview-tab.scss

@@ -4,6 +4,7 @@
 }
 
 .preview-tab-group.mat-tab-group {
+    height: 100%;
     .mat-tab-header {
         border-bottom: none;
         background-color: white;