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
index 3497792d5..9ed5d7959 100644
--- 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,7 +292,12 @@
+ @defer (on viewport; prefetch on idle) {
{{ movie.overview }}
+ }
+ @placeholder {
+
+ }
@@ -300,13 +305,23 @@
-
+ @defer (on viewport; prefetch on idle) {
+
+ }
+ @placeholder {
+
+ }
-
+ @defer (on viewport; prefetch on idle) {
+
+ }
+ @placeholder {
+
+ }
@@ -320,6 +335,7 @@
0">
+ @defer (on viewport; prefetch on idle) {
{{ 'MediaDetails.Trailers' | translate }}
@@ -335,6 +351,10 @@
+ }
+ @placeholder {
+
+ }
@@ -345,6 +365,7 @@
+ @defer (on viewport; prefetch on idle) {
0">
@@ -398,6 +419,10 @@
+ }
+ @placeholder {
+
+ }
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
index 192507c45..4661c9f6a 100644
--- 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 @@
- @defer {
+ @defer (on viewport; prefetch on idle) {
} @placeholder {
-
-
-
+
}
@@ -216,14 +214,14 @@
- @defer (on viewport) {
+ @defer (on viewport; prefetch on idle) {
} @placeholder {
-
+
}
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
index a171d990f..196a8f93a 100644
--- 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
index c7f166bce..91ff4978b 100644
--- 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