fix(discover): Improved rendering on the discover page

src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html

@@ -5,9 +5,13 @@
     <mat-button-toggle id="{{id}}Tv" [ngClass]="{'button-active': discoverOptions === DiscoverOption.Tv}" value="{{DiscoverOption.Tv}}" class="discover-filter-button">{{'Discovery.Tv' | translate}}</mat-button-toggle>
   </mat-button-toggle-group>
 </div>
-
+@defer (when discoverResults.length > 0) {
 <p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
     <ng-template let-result pTemplate="item">
         <discover-card [discoverType]="discoverType" [isAdmin]="isAdmin" [result]="result" [is4kEnabled]="is4kEnabled"></discover-card>
     </ng-template>
-</p-carousel>
+</p-carousel>
+}
+@placeholder(minimum 500) {
+    <p-skeleton width="100%" height="18rem"></p-skeleton>
+}

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html

@@ -1,12 +1,7 @@
 <div class="small-middle-container">
 	<div class="section">
-		@defer (on viewport; prefetch on idle) {
 		<h2 id="genreHeading" data-toggle="collapse" href="#genreCollapse" role="button">{{ 'Discovery.Genres' | translate }}</h2>
 		<genre-button-select class="collapse show" id="genreCollapse"></genre-button-select>
-		}
-		@placeholder {
-			<p-skeleton width="100%" height="2rem"></p-skeleton>
-		}
 	</div>
 	<div class="section">
 		<h2>{{ 'Discovery.RecentlyRequestedTab' | translate }}</h2>

src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.html

@@ -1,13 +1,26 @@
-<div class="genre-container" *ngIf="movieGenreList$ | async as movies">
+
-    <mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of movies"
+@defer (when movieGenreList()) {
-        class="discover-filter-buttons-group">
+    <div class="genre-container">
-        <mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
+        <mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of movieGenreList()"
-    </mat-button-toggle-group>
+            class="discover-filter-buttons-group">
-</div>
+            <mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
-<div class="genre-container" *ngIf="tvGenreList$ | async as tv">
+        </mat-button-toggle-group>
-    <mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of tv"
+    </div>
-        class="discover-filter-buttons-group">
+}
-        <mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
+@placeholder(minimum 500) {
-    </mat-button-toggle-group>
+    <p-skeleton width="100%" height="3.5rem"></p-skeleton>
-    <mat-spinner *ngIf="isLoading" [diameter]="30"></mat-spinner>
+}
-</div>
+
+@defer (when tvGenreList()) {
+    <div class="genre-container">
+        <mat-button-toggle-group name="discoverMode" (change)="toggleChanged($event, genre.type)" *ngFor="let genre of tvGenreList()"
+            class="discover-filter-buttons-group">
+            <mat-button-toggle value="{{genre.id}}" class="discover-filter-button">{{genre.name}}</mat-button-toggle>
+        </mat-button-toggle-group>
+    </div>
+}
+@placeholder(minimum 500) {
+    <p-skeleton width="100%" height="3.5rem"></p-skeleton>
+}
+
+<mat-spinner *ngIf="isLoading" [diameter]="30"></mat-spinner>

src/Ombi/ClientApp/src/app/discover/components/genre/genre-button-select.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, computed, signal } from "@angular/core";
 import { SearchV2Service } from "../../../services";
 import { MatButtonToggleChange } from "@angular/material/button-toggle";
 import { RequestType } from "../../../interfaces";
 import { AdvancedSearchDialogDataService } from "app/shared/advanced-search-dialog/advanced-search-dialog-data.service";
 import { Router } from "@angular/router";
 import { map, Observable } from "rxjs";
+import { toSignal } from '@angular/core/rxjs-interop';
 
 interface IGenreSelect {
     name: string;
@@ -17,8 +18,10 @@ interface IGenreSelect {
     styleUrls: ["./genre-button-select.component.scss"],
 })
 export class GenreButtonSelectComponent implements OnInit {
-    public movieGenreList$: Observable<IGenreSelect[]> = null;
+
-    public tvGenreList$: Observable<IGenreSelect[]> = null;
+    public movieGenreList = signal<IGenreSelect[]>(null);
+    public tvGenreList = signal<IGenreSelect[]>(null);
+
 
     isLoading: boolean = false;
 
@@ -27,8 +30,14 @@ export class GenreButtonSelectComponent implements OnInit {
         private router: Router) { }
 
     public ngOnInit(): void {
-        this.movieGenreList$ = this.searchService.getGenres("movie").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "movie" }))));
+        this.searchService.getGenres("movie").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "movie" } as IGenreSelect))))
-        this.tvGenreList$ = this.searchService.getGenres("tv").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "tv" }))));
+            .subscribe(x => {
+                this.movieGenreList.set(x);
+            });
+        this.searchService.getGenres("tv").pipe(map(x => x.slice(0, 10).map(y => ({ name: y.name, id: y.id, type: "tv" } as IGenreSelect))))
+            .subscribe(x => {
+                this.tvGenreList.set(x);
+            });
     }
 
     public async toggleChanged(event: MatButtonToggleChange, type: "movie"|"tv") {

src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html

@@ -1,9 +1,8 @@
-<div *ngIf="requests$ | async as requests">
+@defer (when requests()) {
-    <div *ngIf="requests.length > 0">
+    <div *ngIf="requests().length > 0">
-        <p-carousel #carousel [value]="requests" [numVisible]="3" [numScroll]="1"
+        <p-carousel #carousel [value]="requests()" [numVisible]="3" [numScroll]="1"
             [responsiveOptions]="responsiveOptions" [page]="0">
             <ng-template let-result pTemplate="item">
-                @defer (on viewport; prefetch on idle) {
                 <ombi-detailed-card
                     [request]="result"
                     [isAdmin]="isAdmin"
@@ -11,11 +10,25 @@
                     (onApprove)="approve(result)"
                     (onDeny)="deny(result)">
                 </ombi-detailed-card>
-            }
-            @placeholder {
-                <p-skeleton width="100%" height="315px"></p-skeleton>
-            }
             </ng-template>
         </p-carousel>
     </div>
-</div>
+}@placeholder(minimum 500) {
+    <div class="row loading-container">
+        <div class="col-2">
+            <p-skeleton width="100%" height="270px"></p-skeleton>
+        </div>
+        <div class="col-2">
+            <p-skeleton width="100%" height="270px"></p-skeleton>
+        </div>
+        <div class="col-2">
+            <p-skeleton width="100%" height="270px"></p-skeleton>
+        </div>
+        <div class="col-2">
+            <p-skeleton width="100%" height="270px"></p-skeleton>
+        </div>
+        <div class="col-2">
+            <p-skeleton width="100%" height="270px"></p-skeleton>
+        </div>
+    </div>
+}

src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.scss

@@ -109,4 +109,8 @@
   ::ng-deep .p-carousel-item{
     flex: 1 0 200px !important;
   }
+}
+
+.loading-container {
+  margin-left: 10rem; 
 }

src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, OnDestroy } from "@angular/core";
+import { Component, OnInit, Input, ViewChild, OnDestroy, signal } from "@angular/core";
 import { IRecentlyRequested, IRequestEngineResult, RequestType } from "../../../interfaces";
 import { Carousel } from 'primeng/carousel';
 import { ResponsiveOptions } from "../carousel.options";
@@ -31,6 +31,7 @@ export class RecentlyRequestedListComponent implements OnInit, OnDestroy {
     @ViewChild('carousel', {static: false}) carousel: Carousel;
 
     public requests$: Observable<IRecentlyRequested[]>;
+    public requests = signal<IRecentlyRequested[]>(null);
 
     public responsiveOptions: any;
     public RequestType = RequestType;
@@ -119,11 +120,13 @@ export class RecentlyRequestedListComponent implements OnInit, OnDestroy {
     }
 
     private loadData() {
-        this.requests$ = this.requestServiceV2.getRecentlyRequested().pipe(
+        this.requestServiceV2.getRecentlyRequested().pipe(
             tap(() => this.loading()),
             takeUntil(this.$loadSub),
             finalize(() => this.finishLoading())
-        );
+        ).subscribe(x => {
+            this.requests.set(x);
+        });
     }
 
     private loading() {