fix preview loader

web/projects/ui/src/app/routes/portal/components/header/header.component.ts

@@ -50,7 +50,7 @@ import { BreadcrumbsService } from 'src/app/services/breadcrumbs.service'
       :host {
         display: flex;
         height: 3.5rem;
-        padding: 0.375rem;
+        padding: var(--bumper);
         --clip-path: polygon(
           0% 0%,
           calc(100% - 1.75rem) 0%,

web/projects/ui/src/app/routes/portal/portal.component.ts

@@ -39,7 +39,7 @@ import { HeaderComponent } from './components/header/header.component'
       main {
         flex: 1;
         overflow: hidden;
-        margin-bottom: 0.375rem;
+        margin-bottom: var(--bumper);
       }
     `,
   ],

web/projects/ui/src/app/routes/portal/routes/system/marketplace/modals/preview.component.ts

@@ -38,8 +38,8 @@ import { Router } from '@angular/router'
     <div class="outer-container">
       <ng-content select="[slot=close]" />
       @if (pkg$ | async; as pkg) {
-        @if (loading) {
-          <tui-loader class="loading-dots" textContent="Loading" />
+        @if (loading$ | async) {
+          <tui-loader class="loading" textContent="Loading" />
         } @else {
           <marketplace-package-hero [pkg]="pkg">
             <ng-content select="[slot=controls]" />
@@ -83,7 +83,7 @@ import { Router } from '@angular/router'
                   <button
                     tuiButton
                     appearance="secondary"
-                    (click)="loading = true; completeWith(data.value)"
+                    (click)="loading$.next(true); completeWith(data.value)"
                   >
                     Ok
                   </button>
@@ -106,6 +106,7 @@ import { Router } from '@angular/router'
         flex-direction: column;
         padding: 1.75rem;
         min-width: 100%;
+        height: calc(100vh - var(--portal-header-height) - var(--bumper));
         margin-top: 5rem;
 
         @media (min-width: 768px) {
@@ -145,6 +146,12 @@ import { Router } from '@angular/router'
           cursor: pointer;
         }
       }
+
+      .loading {
+        min-width: 30rem;
+        height: 100%;
+        place-self: center;
+      }
     `,
   ],
   standalone: true,
@@ -170,7 +177,7 @@ export class MarketplacePreviewComponent {
   @Input({ required: true })
   pkgId!: string
 
-  loading = true
+  readonly loading$ = new BehaviorSubject(true)
 
   readonly displayEmver = displayEmver
   private readonly router = inject(Router)
@@ -184,7 +191,7 @@ export class MarketplacePreviewComponent {
       this.marketplaceService.getPackage$(this.pkgId, version, this.url),
     ),
     tap(data => {
-      this.loading = false
+      this.loading$.next(false)
       return data
     }),
   )

web/projects/ui/src/styles.scss

@@ -13,6 +13,10 @@ ul {
   list-style-type: disc;
 }
 
+:root {
+  --bumper: 0.375rem;
+}
+
 .g-page {
   @include scrollbar-hidden();
 
@@ -23,7 +27,7 @@ ul {
   overflow: auto;
   isolation: isolate;
   backdrop-filter: blur(2rem);
-  margin: 0 0.375rem;
+  margin: 0 var(--bumper);
   border-radius: 0.375rem;
 
   // TODO: Theme