perf(details): ⚡ Improve load performance for the TV and Movie Details pages

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html

@@ -292,7 +292,12 @@
 						<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>
@@ -300,13 +305,23 @@
 
 					<div class="row">
 						<div class="col-12">
+							@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>

src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html

@@ -192,12 +192,10 @@
 						</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">
+								<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
-								<mat-spinner [color]="'accent'"></mat-spinner>
-							</div>
 							}
 						</div>
 
@@ -216,14 +214,14 @@
 										</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>
 									}

src/Ombi/ClientApp/src/app/media-details/media-details.component.scss

@@ -362,3 +362,8 @@
         width:100%;
     }
 }
+
+.placeholder {
+    height: 100px;
+    display: block;
+}

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