fix(loading): enhance loading skeleton visibility for smoother transitions

Author: OnlineDynamic

www/css/fpp-dark.css

@@ -536,3 +536,23 @@
 [data-bs-theme="dark"] .modal-backdrop.show {
     opacity: 0.7;
 }
+
+/* ------------------------------------------------------------- */
+/* Loading skeletons                                             */
+/* fpp-bootstrap ships these in light greys (#f8f9fa/#dee2e6),   */
+/* which read as a glaring white block against a dark page —     */
+/* most obvious as the large rounded bar standing in for the     */
+/* playlist controls on the status page. Re-tint to match the    */
+/* dark surfaces they sit on.                                    */
+/* ------------------------------------------------------------- */
+
+[data-bs-theme="dark"] .skeleton-loader div {
+    background: #20222e;
+    background: linear-gradient(
+        90deg,
+        #2c3048 0%,
+        #20222e 39%,
+        #20222e 57%,
+        #2c3048 100%
+    );
+}

www/css/fpp.css

@@ -1120,22 +1120,35 @@ body.modal-open #scrollTopButton {
 	min-height: 300px;
 }
 
-body.is-loading .statusPageLoading {
+/* Gated on .show-loading-skeleton, not on .is-loading alone: fpp.js only adds
+   that class if the page is still loading after a short delay, so a fast
+   refresh settles without ever painting these placeholders. */
+body.is-loading.show-loading-skeleton .statusPageLoading {
 	display: block;
+	animation: fppSkeletonFadeIn 0.2s ease-in both;
 }
 
-body.is-loading #schedulerInfo .labelHeading,
-body.is-loading #schedulerInfo .labelValue {
+@keyframes fppSkeletonFadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+body.is-loading.show-loading-skeleton #schedulerInfo .labelHeading,
+body.is-loading.show-loading-skeleton #schedulerInfo .labelValue {
 	position: relative;
 	color: rgba(0, 0, 0, 0);
 }
 
-body.is-loading #schedulerInfo .labelAction {
+body.is-loading.show-loading-skeleton #schedulerInfo .labelAction {
 	opacity: 0;
 }
 
-body.is-loading #schedulerInfo .labelHeading:before,
-body.is-loading #schedulerInfo .labelValue:before {
+body.is-loading.show-loading-skeleton #schedulerInfo .labelHeading:before,
+body.is-loading.show-loading-skeleton #schedulerInfo .labelValue:before {
 	display: block;
 	content: '';
 	top: 0;
@@ -1158,12 +1171,12 @@ body.is-loading #schedulerInfo .labelValue:before {
 	);
 }
 
-body.is-loading #schedulerInfo .labelHeading:before {
+body.is-loading.show-loading-skeleton #schedulerInfo .labelHeading:before {
 	right: 0;
 	height: 14px;
 }
 
-body.is-loading #schedulerInfo .labelValue:before {
+body.is-loading.show-loading-skeleton #schedulerInfo .labelValue:before {
 	height: 14px;
 	width: 60px;
 }
@@ -3235,12 +3248,14 @@ pre.testData,
 #rebootFlag,
 #unsupportedBrowser,
 #warningsRow,
-#bannerRow {
+#bannerRow,
+#bannerHostnameRow {
 	display: none;
 	clear: both;
 }
 
-#bannerRow a {
+#bannerRow a,
+#bannerHostnameRow a {
 	color: white;
 }
 

www/js/fpp.js

@@ -156,7 +156,20 @@ once in place pageSpecific_ViewPortChange() - loads any actions unique to the pa
 occur on a viewport size change
 
 */
+// Loading skeletons only earn their keep on a slow load. Against a local FPP
+// the status APIs answer in tens of milliseconds, so painting the placeholders
+// immediately just flashes a big grey block where the playlist controls are
+// about to appear. Hold them back and reveal them only if the page is still
+// loading once the delay is up; a fast refresh then never shows them at all.
+var SKELETON_REVEAL_DELAY_MS = 400;
+
 $(function () {
+	setTimeout(function () {
+		if (document.body && document.body.classList.contains('is-loading')) {
+			document.body.classList.add('show-loading-skeleton');
+		}
+	}, SKELETON_REVEAL_DELAY_MS);
+
 	// do any page DOM manipulation required
 	common_PageLoad_DOM_Setup();
 	if (typeof pageSpecific_PageLoad_DOM_Setup === 'function') {
@@ -5304,7 +5317,7 @@ function SetupUIForMode (fppMode) {
 		}
 	}
 	if ($('body').hasClass('is-loading')) {
-		$('body').removeClass('is-loading');
+		$('body').removeClass('is-loading show-loading-skeleton');
 	}
 }