perf(discover): ⚡ Improve load performance on the discover page

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

@@ -1,5 +1,5 @@
-<p-skeleton id="cardLoading{{result.id}}"  *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
 
+@defer (on viewport; prefetch on idle) {
 <div id="result{{result.id}}" *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
     <div class="card-top-info">
         <div class="top-left" id="type{{result.id}}-{{RequestType[result.type]}}">
@@ -48,3 +48,7 @@
 
         </div>
 </div>
+}
+@placeholder {
+    <p-skeleton id="cardLoading{{result.id}}"  width="100%" height="315px"></p-skeleton>
+}

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

@@ -1,7 +1,12 @@
 <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/recently-requested-list/recently-requested-list.component.html

@@ -3,6 +3,7 @@
         <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"
@@ -10,6 +11,10 @@
                     (onApprove)="approve(result)"
                     (onDeny)="deny(result)">
                 </ombi-detailed-card>
+            }
+            @placeholder {
+                <p-skeleton width="100%" height="315px"></p-skeleton>
+            }
             </ng-template>
         </p-carousel>
     </div>