From 9f4adfc55533a8817cbe1ff81028f1f08d4f439e Mon Sep 17 00:00:00 2001
From: =?utf8?q?Tim=20D=C3=BCsterhus?= <duesterhus@woltlab.com>
Date: Thu, 13 Jul 2023 14:59:39 +0200
Subject: [PATCH] Improve the loading experience of the newsfeed in dark mode

The default page of an `<iframe>` is `about:blank` which has a light background
color. In case the newsfeed loads slowly or fails to load entirely, there will
be a big white block in a dark mode ACP which looks odd.

Fix this issue by setting the `<iframe>` to be `visibility: hidden` until the
contents are available. Additionally a spinner is shown while the iframe is
hidden.
---
 wcfsetup/install/files/acp/style/layout.scss  | 16 +++++++++++-
 .../install/files/acp/templates/index.tpl     | 25 +++++++++++++------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index d3a5490563..0cb42d1377 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -870,10 +870,24 @@ html[data-color-scheme="dark"] {
 	}
 }
 
-#woltlab_newsfeed {
+.woltlabNewsfeed__loading {
+	text-align: center;
+	width: 600px;
+}
+
+.woltlabNewsfeed.loaded .woltlabNewsfeed__loading {
+	display: none;
+}
+
+.woltlabNewsfeed__iframe {
 	border: 1px solid var(--wcfContentBorderInner);
 	border-radius: var(--wcfBorderRadius);
 	height: 100vh;
 	max-width: 100%;
+	visibility: hidden;
 	width: 600px;
 }
+
+.woltlabNewsfeed.loaded .woltlabNewsfeed__iframe {
+	visibility: visible;
+}
diff --git a/wcfsetup/install/files/acp/templates/index.tpl b/wcfsetup/install/files/acp/templates/index.tpl
index 7214cb2ef7..b7b258e9f4 100644
--- a/wcfsetup/install/files/acp/templates/index.tpl
+++ b/wcfsetup/install/files/acp/templates/index.tpl
@@ -56,20 +56,30 @@
 	{if ENABLE_WOLTLAB_NEWS}
 		<div id="news" class="hidden tabMenuContent">
 			<div class="section">
-				<iframe
-					id="woltlab_newsfeed"
-					referrerpolicy="no-referrer"
-					sandbox
-					hidden
-				></iframe>
+				<div class="woltlabNewsfeed">
+					<div class="woltlabNewsfeed__loading">{icon name='spinner' size=64}</div>
+					<iframe
+						class="woltlabNewsfeed__iframe"
+						referrerpolicy="no-referrer"
+						sandbox
+					></iframe>
+				</div>
+
 				<script data-eager="true">
 				{
 					const languageCode = "{if $__wcf->language->languageCode === 'de'}de{else}en{/if}";
 					let colorScheme = document.documentElement.dataset.colorScheme;
-					const iframe = document.getElementById("woltlab_newsfeed");
+					const container = document.querySelector('.woltlabNewsfeed');
+					const iframe = container.querySelector(".woltlabNewsfeed__iframe");
 
 					const updateColorScheme = () => {
+						container.classList.remove('loaded');
 						iframe.src = `https://newsfeed.woltlab.com/${ languageCode }_${ colorScheme }.html`;
+						iframe.addEventListener(
+							'load',
+							() => container.classList.add('loaded'),
+							{ once: true }
+						);
 					};
 
 					const observer = new MutationObserver(() => {
@@ -84,7 +94,6 @@
 					});
 
 					updateColorScheme();
-					iframe.hidden = false;
 				}
 				</script>
 			</div>
-- 
2.20.1