From 43fe449e327bcf5d8264beacfd97c3aa842f6bce Mon Sep 17 00:00:00 2001
From: Jamie <tidusjar@gmail.com>
Date: Tue, 5 Mar 2024 15:13:12 +0000
Subject: [PATCH] chore: Performance improvements on the TV Details page

---
 src/Ombi/ClientApp/.prettierrc.js              | 18 ++++++++++++++++++
 .../components/tv/tv-details.component.html    | 12 ++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/Ombi/ClientApp/.prettierrc.js

diff --git a/src/Ombi/ClientApp/.prettierrc.js b/src/Ombi/ClientApp/.prettierrc.js
new file mode 100644
index 000000000..6d817be43
--- /dev/null
+++ b/src/Ombi/ClientApp/.prettierrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+	...require('@exclaimer/prettier-config'),
+	overrides: [
+		{
+			files: ['*.yaml', '*.yml'],
+			options: {
+				tabWidth: 2,
+				singleQuote: false,
+			},
+		},
+		{
+			files: 'index.html',
+			options: {
+				parser: 'html',
+			},
+		},
+	],
+};
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 f62edb822..192507c45 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,7 +192,13 @@
 						</div>
 
 						<div class="col-12 col-md-10">
+							@defer {
 							<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>
+							}
 						</div>
 
 						<div class="col-12 col-md-2">
@@ -210,11 +216,17 @@
 										</mat-panel-title>
 									</mat-expansion-panel-header>
 
+									@defer (on viewport) {
 									<tv-requests-panel
 										[tvRequest]="tvRequest"
 										[isAdmin]="isAdmin"
 										[manageOwnRequests]="manageOwnRequests"
 									></tv-requests-panel>
+									} @placeholder {
+									<div class="loading-spinner">
+										<mat-spinner [color]="'accent'"></mat-spinner>
+									</div>
+									}
 								</mat-expansion-panel>
 							</mat-accordion>
 						</div>