perf: ⚡ Improve render performance on the discover, movie and tv pages (

#5084) * perf(details): ⚡ Improve load performance for the TV and Movie Details pages * perf(discover): ⚡ Improve load performance on the discover page * fixed tests * Fixed the dates * test * fix
Ombi-app · Mar 6, 2024 · 71c86a8 · 71c86a8
1 parent 5cbb2ca
commit 71c86a8
Show file tree

Hide file tree

Showing 30 changed files with 229 additions and 174 deletions.
diff --git a/src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.html b/src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.html
@@ -14,7 +14,7 @@ <h3 id="detailed-request-title-{{request.mediaId}}">{{request.title}}</h3>
                     <p id="detailed-request-requestedby-{{request.mediaId}}">{{'MediaDetails.RequestedBy' | translate}} {{request.username}}</p>
                 </div>
                 <div class="col-12">
-                    <p id="detailed-request-date-{{request.mediaId}}">{{'MediaDetails.OnDate' | translate}} {{request.requestDate | dfnsFormat: 'Ppp'}}</p>
+                    <p id="detailed-request-date-{{request.mediaId}}">{{'MediaDetails.OnDate' | translate}} {{request.requestDate | ombiDate: 'Ppp'}}</p>
                 </div>
                 <div class="col-12">
                     <p id="detailed-request-status-{{request.mediaId}}">{{'MediaDetails.Status' | translate}} <span class="badge badge-{{getClass(request)}}">{{getStatus(request) | translate}}</span></p>

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
@@ -1,4 +1,3 @@
-<p-skeleton id="cardLoading{{result.id}}"  *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
 
 <div id="result{{result.id}}" *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
     <div class="card-top-info">
@@ -43,8 +42,5 @@
                     </button>
                 </div>
             </ng-template>
-
-
-
         </div>
-</div>
+</div>
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
@@ -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/...rc/app/discover/components/recently-requested-list/recently-requested-list.component.html b/...rc/app/discover/components/recently-requested-list/recently-requested-list.component.html
@@ -3,13 +3,18 @@
         <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"
                     (onClick)="navigate(result)"
                     (onApprove)="approve(result)"
                     (onDeny)="deny(result)">
                 </ombi-detailed-card>
+            }
+            @placeholder {
+                <p-skeleton width="100%" height="315px"></p-skeleton>
+            }
             </ng-template>
         </p-carousel>
     </div>

diff --git a/src/Ombi/ClientApp/src/app/issues/components/details-group/details-group.component.html b/src/Ombi/ClientApp/src/app/issues/components/details-group/details-group.component.html
@@ -2,7 +2,7 @@
 	<mat-card-header>
 		<mat-card-title>{{ issue.subject }}</mat-card-title>
 		<mat-card-subtitle>{{
-			'Issues.UserOnDate' | translate: { user: issue.userReported?.userName, date: issue.createdDate | dfnsFormat: 'PP' }
+			'Issues.UserOnDate' | translate: { user: issue.userReported?.userName, date: issue.createdDate | ombiDate: 'PP' }
 		}}</mat-card-subtitle>
 		<mat-card-subtitle>{{ issue.issueCategory.value }}</mat-card-subtitle>
 	</mat-card-header>

diff --git a/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html b/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html
@@ -82,7 +82,7 @@ <h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span> {{ 'Is
 										(click)="deleteComment(comment.id)"
 									></i>
 									<p>{{ comment.comment }}</p>
-									<time>{{ comment.username }} • {{ comment.date | dfnsFormat: 'Ppp' }}</time>
+									<time>{{ comment.username }} • {{ comment.date | ombiDate: 'Ppp' }}</time>
 								</div>
 							</div>
 						</div>

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@@ -292,21 +292,36 @@
 						<div class="col-12">
 							<mat-card class="mat-elevation-z8 spacing-below">
 								<mat-card-content>
+									@defer (on viewport; prefetch on idle) {
 									{{ movie.overview }}
+									}
+									@placeholder {
+									<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
+									}
 								</mat-card-content>
 							</mat-card>
 						</div>
 					</div>
 
 					<div class="row">
 						<div class="col-12">
-							<cast-carousel [cast]="movie.credits.cast"></cast-carousel>
+							@defer (on viewport; prefetch on idle) {
+								<cast-carousel [cast]="movie.credits.cast"></cast-carousel>
+							}
+							@placeholder {
+							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
+							}
 						</div>
 					</div>
 
 					<div class="row">
 						<div class="col-12">
-							<crew-carousel [crew]="movie.credits.crew"></crew-carousel>
+							@defer (on viewport; prefetch on idle) {
+								<cast-carousel [cast]="movie.credits.crew"></cast-carousel>
+							}
+							@placeholder {
+							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
+							}
 						</div>
 					</div>
 
@@ -320,6 +335,7 @@
 					<div class="row" *ngIf="movie.videos?.results?.length > 0">
 						<div class="col-12">
 							<mat-card class="mat-elevation-z8">
+								@defer (on viewport; prefetch on idle) {
 								<mat-card-header>{{ 'MediaDetails.Trailers' | translate }}</mat-card-header>
 								<mat-card-content>
 									<p-carousel class="no-indicator" [numVisible]="2" [numScroll]="10" [page]="0" [value]="movie.videos?.results">
@@ -335,6 +351,10 @@
 										</ng-template>
 									</p-carousel>
 								</mat-card-content>
+							}
+							@placeholder {
+							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
+							}
 							</mat-card>
 						</div>
 					</div>
@@ -345,6 +365,7 @@
 								<issues-panel [providerId]="movie.imdbId" [isAdmin]="isAdmin"></issues-panel>
 							</div>
 
+							@defer (on viewport; prefetch on idle) {
 							<mat-accordion class="mat-elevation-z8 spacing-below">
 								<mat-expansion-panel *ngIf="movie.recommendations?.results?.length > 0">
 									<mat-expansion-panel-header>
@@ -398,6 +419,10 @@
 									</div>
 								</mat-expansion-panel>
 							</mat-accordion>
+						}
+						@placeholder {
+							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
+						}
 						</div>
 					</div>
 				</div>

diff --git a/...tApp/src/app/media-details/components/movie/panels/movie-information-panel.component.html b/...tApp/src/app/media-details/components/movie/panels/movie-information-panel.component.html
@@ -49,8 +49,8 @@
 
 	<div *ngIf="request">
 		<span class="label">{{ 'MediaDetails.RequestDate' | translate }}</span>
-		<span *ngIf="request.requestedDate < request.requestedDate4k"> {{ request.requestedDate4k | dfnsFormat: 'PP' }}</span>
-		<span *ngIf="request.requestedDate > request.requestedDate4k"> {{ request.requestedDate | dfnsFormat: 'PP' }}</span>
+		<span *ngIf="request.requestedDate < request.requestedDate4k"> {{ request.requestedDate4k | ombiDate: 'PP' }}</span>
+		<span *ngIf="request.requestedDate > request.requestedDate4k"> {{ request.requestedDate | ombiDate: 'PP' }}</span>
 	</div>
 
 	<div *ngIf="request && request.source !== RequestSource.Ombi">
@@ -90,11 +90,11 @@
 	<hr />
 
 	<span class="label">{{ 'MediaDetails.TheatricalRelease' | translate }}</span>
-	{{ movie.releaseDate | dfnsFormat: 'PP' }}
+	{{ movie.releaseDate | ombiDate: 'PP' }}
 
 	<div *ngIf="movie.digitalReleaseDate">
 		<span class="label">{{ 'MediaDetails.DigitalRelease' | translate }}</span>
-		{{ movie.digitalReleaseDate | dfnsFormat: 'PP' }}
+		{{ movie.digitalReleaseDate | ombiDate: 'PP' }}
 	</div>
 
 	<div *ngIf="movie.voteCount">

diff --git a/...bi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html b/...bi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
@@ -8,7 +8,7 @@
 				<div class="mobile-top-text">
 					<h1 id="mediaTitle" class="large-text">
 						{{ title }}
-						<span *ngIf="releaseDateFormat" class="grey-text"> ({{ releaseDate | dfnsFormat: 'P' }})</span>
+						<span *ngIf="releaseDateFormat" class="grey-text"> ({{ releaseDate | ombiDate: 'P' }})</span>
 					</h1>
 
 					<h2 class="tagline">{{ tagline }}</h2>

diff --git a/...dia-details/components/tv/panels/tv-information-panel/tv-information-panel.component.html b/...dia-details/components/tv/panels/tv-information-panel/tv-information-panel.component.html
@@ -31,7 +31,7 @@
 			<span id="status"> {{ tv.status | translateStatus }}</span>
 		</div>
 		<span class="label">{{ 'MediaDetails.FirstAired' | translate }}</span>
-		{{ tv.firstAired | dfnsFormat: 'PP' }}
+		{{ tv.firstAired | ombiDate: 'PP' }}
 	</div>
 
 	<div *ngIf="seasonCount">

diff --git a/...src/app/media-details/components/tv/panels/tv-request-grid/tv-request-grid.component.html b/...src/app/media-details/components/tv/panels/tv-request-grid/tv-request-grid.component.html
@@ -48,7 +48,7 @@
 
 			<ng-container matColumnDef="airDate">
 				<th mat-header-cell *matHeaderCellDef>{{ 'Requests.AirDate' | translate }}</th>
-				<td mat-cell *matCellDef="let element">{{ element.airDate | dfnsFormat: 'P' }}</td>
+				<td mat-cell *matCellDef="let element">{{ element.airDate | ombiDate: 'P' }}</td>
 			</ng-container>
 
 			<ng-container matColumnDef="status">

diff --git a/...p/src/app/media-details/components/tv/panels/tv-requests/tv-requests-panel.component.html b/...p/src/app/media-details/components/tv/panels/tv-requests/tv-requests-panel.component.html
@@ -10,7 +10,7 @@
 						| translate
 							: {
 									user: request.requestedUser.userAlias,
-									date: request.requestedDate | dfnsFormat: 'PP'
+									date: request.requestedDate | ombiDate: 'PP'
 							  }
 				}}
 				<span *ngIf="request.denied"> - {{ request.deniedReason }}</span>
@@ -35,7 +35,7 @@
 
 					<ng-container matColumnDef="airDate">
 						<th mat-header-cell *matHeaderCellDef>{{ 'Requests.AirDate' | translate }}</th>
-						<td mat-cell *matCellDef="let element">{{ element.airDate | dfnsFormat: 'P' }}</td>
+						<td mat-cell *matCellDef="let element">{{ element.airDate | ombiDate: 'P' }}</td>
 					</ng-container>
 
 					<ng-container matColumnDef="status">

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
@@ -192,12 +192,10 @@ <h3>{{ 'MediaDetails.NotEnoughInfo' | translate }}</h3>
 						</div>
 
 						<div class="col-12 col-md-10">
-							@defer {
+							@defer (on viewport; prefetch on idle) {
 							<tv-request-grid id="requests-grid" [tvRequest]="tvRequest" [isAdmin]="isAdmin" [tv]="tv"></tv-request-grid>
 							} @placeholder {
-							<div class="loading-spinner">
-								<mat-spinner [color]="'accent'"></mat-spinner>
-							</div>
+								<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
 							}
 						</div>
 
@@ -216,14 +214,14 @@ <h3>{{ 'MediaDetails.NotEnoughInfo' | translate }}</h3>
 										</mat-panel-title>
 									</mat-expansion-panel-header>
 
-									@defer (on viewport) {
+									@defer (on viewport; prefetch on idle) {
 									<tv-requests-panel
 										[tvRequest]="tvRequest"
 										[isAdmin]="isAdmin"
 										[manageOwnRequests]="manageOwnRequests"
 									></tv-requests-panel>
 									} @placeholder {
-									<div class="loading-spinner">
+										<div class="loading-spinner" style="left: 50%;position: absolute;">
 										<mat-spinner [color]="'accent'"></mat-spinner>
 									</div>
 									}

diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
@@ -357,8 +357,13 @@
     .media-row .btn-spacing{
         margin-right:0;
     }
-    
+
     .media-row span{
         width:100%;
     }
 }
+
+.placeholder {
+    height: 100px;
+    display: block;
+}
diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts b/src/Ombi/ClientApp/src/app/media-details/media-details.module.ts
@@ -13,6 +13,7 @@ import { AuthGuard } from "../auth/auth.guard";
 import { ArtistDetailsComponent } from "./components/artist/artist-details.component";
 import { ReactiveFormsModule } from "@angular/forms";
 import { ImageComponent } from "app/components";
+import { SkeletonModule } from "primeng/skeleton";
 
 
 const routes: Routes = [
@@ -29,6 +30,7 @@ const routes: Routes = [
         PipeModule,
         CarouselModule,
         ImageComponent,
+        SkeletonModule,
     ],
     declarations: [
         ...fromComponents.components

diff --git a/src/Ombi/ClientApp/src/app/pipes/OmbiDatePipe.ts b/src/Ombi/ClientApp/src/app/pipes/OmbiDatePipe.ts
@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { FormatPipe } from 'ngx-date-fns';
+
+@Pipe({
+    name: "ombiDate",
+})
+export class OmbiDatePipe implements PipeTransform  {
+
+    constructor(
+        private FormatPipe: FormatPipe,
+      ) {}
+
+    public transform(value: string, format: string ) {
+        const date = new Date(value);
+        return this.FormatPipe.transform(date, format);
+    }
+}
diff --git a/src/Ombi/ClientApp/src/app/pipes/ThousandShortPipe.ts b/src/Ombi/ClientApp/src/app/pipes/ThousandShortPipe.ts
@@ -5,19 +5,19 @@
 })
 export class ThousandShortPipe implements PipeTransform {
     transform(input: any, args?: any): any {
-      var exp, rounded,
+      var exp,
         suffixes = ['k', 'M', 'G', 'T', 'P', 'E'];
-  
+
       if (Number.isNaN(input)) {
         return null;
       }
-  
+
       if (input < 1000) {
         return input;
       }
-  
+
       exp = Math.floor(Math.log(input) / Math.log(1000));
-  
+
       return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];
     }
 }
diff --git a/src/Ombi/ClientApp/src/app/pipes/pipe.module.ts b/src/Ombi/ClientApp/src/app/pipes/pipe.module.ts
@@ -5,11 +5,14 @@ import { ThousandShortPipe } from './ThousandShortPipe';
 import { SafePipe } from './SafePipe';
 import { QualityPipe } from './QualityPipe';
 import { OrderPipe } from './OrderPipe';
+import { OmbiDatePipe } from './OmbiDatePipe';
+import { FormatPipeModule, FormatPipe } from 'ngx-date-fns';
 
 @NgModule({
-	imports: [],
-	declarations: [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, TranslateStatusPipe, OrderPipe],
-	exports: [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, TranslateStatusPipe, OrderPipe],
+	imports: [FormatPipeModule],
+	declarations: [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, TranslateStatusPipe, OrderPipe, OmbiDatePipe],
+	exports: [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, TranslateStatusPipe, OrderPipe, OmbiDatePipe],
+	providers: [FormatPipe],
 })
 export class PipeModule {
 	public static forRoot(): ModuleWithProviders<PipeModule> {

diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html
@@ -85,7 +85,7 @@
 		</ng-container>
 		<ng-container matColumnDef="title">
 			<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ 'Requests.AlbumName' | translate }}</th>
-			<td mat-cell *matCellDef="let element">{{ element.title }} ({{ element.releaseDate | dfnsFormat: 'P' }})</td>
+			<td mat-cell *matCellDef="let element">{{ element.title }} ({{ element.releaseDate | ombiDate: 'P' }})</td>
 		</ng-container>
 
 		<ng-container matColumnDef="requestedUser.requestedBy">
@@ -95,7 +95,7 @@
 
 		<ng-container matColumnDef="requestedDate">
 			<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ 'Requests.RequestDate' | translate }}</th>
-			<td mat-cell *matCellDef="let element">{{ element.requestedDate | dfnsFormat: 'PP' }}</td>
+			<td mat-cell *matCellDef="let element">{{ element.requestedDate | ombiDate: 'PP' }}</td>
 		</ng-container>
 
 		<ng-container matColumnDef="requestStatus">

diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
@@ -112,7 +112,7 @@
 
 		<ng-container matColumnDef="title">
 			<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ 'Requests.RequestsTitle' | translate }}</th>
-			<td mat-cell id="title{{ element.id }}" *matCellDef="let element">{{ element.title }} ({{ element.releaseDate | dfnsFormat: 'P' }})</td>
+			<td mat-cell id="title{{ element.id }}" *matCellDef="let element">{{ element.title }} ({{ element.releaseDate | ombiDate: 'P' }})</td>
 		</ng-container>
 
 		<ng-container matColumnDef="requestedUser.requestedBy">
@@ -124,7 +124,7 @@
 
 		<ng-container matColumnDef="requestedDate">
 			<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ 'Requests.RequestDate' | translate }}</th>
-			<td mat-cell id="requestedDate{{ element.id }}" *matCellDef="let element">{{ getRequestDate(element) | dfnsFormat: 'PP' }}</td>
+			<td mat-cell id="requestedDate{{ element.id }}" *matCellDef="let element">{{ getRequestDate(element) | ombiDate: 'PP' }}</td>
 		</ng-container>
 
 		<ng-container matColumnDef="status">

diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html
@@ -103,7 +103,7 @@
 		<ng-container matColumnDef="requestedDate">
 			<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ 'Requests.RequestDate' | translate }}</th>
 			<td id="requestedDate{{ element.id }}" mat-cell *matCellDef="let element">
-				{{ element.requestedDate | dfnsFormat: 'PP' }}
+				{{ element.requestedDate | ombiDate: 'PP' }}
 			</td>
 		</ng-container>