fix(requests): match loading placeholder to compact table view (#5428)

Author: tidusjar

src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html

@@ -78,7 +78,7 @@
 </div>
 
 <!-- Loading State -->
-<grid-spinner [loading]="isLoadingResults"></grid-spinner>
+<grid-spinner [loading]="isLoadingResults" [viewMode]="viewMode" [columns]="7"></grid-spinner>
 
 <!-- Card Grid -->
 <div class="card-grid" *ngIf="viewMode === 'cards' && dataSource.length > 0">

src/Ombi/ClientApp/src/app/requests-list/components/grid-spinner/grid-spinner.component.html

@@ -1,6 +1,6 @@
 <div class="loading-container" *ngIf="loading" aria-hidden="true">
-    <div class="skeleton-grid">
-        <div class="skeleton-card" *ngFor="let i of [1,2,3,4,5,6]">
+    <div class="skeleton-grid" *ngIf="viewMode === 'cards'">
+        <div class="skeleton-card" *ngFor="let i of cardItems">
             <div class="skeleton-poster shimmer"></div>
             <div class="skeleton-body">
                 <div class="skeleton-line wide shimmer"></div>
@@ -9,5 +9,23 @@
             </div>
         </div>
     </div>
+    <div class="skeleton-table-wrapper" *ngIf="viewMode === 'compact'">
+        <table class="skeleton-table">
+            <thead>
+                <tr>
+                    <th *ngFor="let c of columnItems">
+                        <div class="skeleton-line head shimmer"></div>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let r of rowItems">
+                    <td *ngFor="let c of columnItems; let first = first">
+                        <div class="skeleton-line shimmer" [ngClass]="first ? 'title' : 'cell'"></div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </div>
 <div *ngIf="loading" role="status" aria-live="polite" class="sr-only">{{ 'Requests.Loading' | translate }}</div>

src/Ombi/ClientApp/src/app/requests-list/components/grid-spinner/grid-spinner.component.scss

@@ -50,6 +50,43 @@
   &.narrow { width: 40%; }
 }
 
+// Compact (table) skeleton - mirrors .compact-table styling
+.skeleton-table-wrapper {
+  background: #111;
+  border: 1px solid #1a1a1a;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.skeleton-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 10px 14px;
+    text-align: left;
+  }
+
+  thead th {
+    border-bottom: 1px solid #222;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid #1a1a1a;
+
+    &:last-child { border-bottom: none; }
+  }
+
+  .skeleton-line {
+    height: 10px;
+
+    &.head { width: 55%; }
+    &.title { width: 80%; height: 12px; }
+    &.cell { width: 65%; }
+  }
+}
+
 .shimmer {
   position: relative;
   overflow: hidden;

src/Ombi/ClientApp/src/app/requests-list/components/grid-spinner/grid-spinner.component.ts

@@ -15,4 +15,13 @@ import { TranslateModule } from "@ngx-translate/core";
 })
 export class GridSpinnerComponent{
     @Input() public loading = false;
+    @Input() public viewMode: "cards" | "compact" = "cards";
+    @Input() public columns = 6;
+
+    public readonly cardItems = [1, 2, 3, 4, 5, 6];
+    public readonly rowItems = [1, 2, 3, 4, 5, 6, 7, 8];
+
+    public get columnItems(): number[] {
+        return Array.from({ length: Math.max(1, this.columns) }, (_, i) => i);
+    }
 }

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html

@@ -87,7 +87,7 @@
 </div>
 
 <!-- Loading State -->
-<grid-spinner [loading]="isLoadingResults"></grid-spinner>
+<grid-spinner [loading]="isLoadingResults" [viewMode]="viewMode" [columns]="isAdmin ? 7 : 6"></grid-spinner>
 
 <!-- Card Grid -->
 <div class="card-grid" *ngIf="viewMode === 'cards' && dataSource && dataSource.data.length > 0">

src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html

@@ -78,7 +78,7 @@
 </div>
 
 <!-- Loading State -->
-<grid-spinner [loading]="isLoadingResults"></grid-spinner>
+<grid-spinner [loading]="isLoadingResults" [viewMode]="viewMode" [columns]="5"></grid-spinner>
 
 <!-- Card Grid -->
 <div class="card-grid" *ngIf="viewMode === 'cards' && dataSource.length > 0">