From 00eb157531df33bfc69b1ff6631177ec086ba833 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Wed, 6 Mar 2024 08:47:22 +0000
Subject: [PATCH] perf(discover): :zap: Improve load performance on the
 discover page

---
 .../discover/components/card/discover-card.component.html   | 6 +++++-
 .../discover/components/discover/discover.component.html    | 5 +++++
 .../recently-requested-list.component.html                  | 5 +++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
index a479b5072..64314b65a 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
+++ b/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>
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
index 16a46c0d6..ff650d1dc 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
+++ b/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>
diff --git a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html b/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html
index 93d66de36..875e34542 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html
+++ b/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>