From 331ffe701634d0c622ca9e125312779ccfcdecaf Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 13 Jul 2023 16:18:52 +0200
Subject: [PATCH] Improve the behavior on mobile, use the loading indicator
 component

---
 wcfsetup/install/files/acp/style/layout.scss   | 18 ++++++++++++------
 wcfsetup/install/files/acp/templates/index.tpl | 14 +++++++-------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 0cb42d1377..16d97ba6aa 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -870,24 +870,30 @@ html[data-color-scheme="dark"] {
 	}
 }
 
-.woltlabNewsfeed__loading {
+.woltlabNewsfeed {
+	border: 1px solid var(--wcfContentBorderInner);
+	border-radius: var(--wcfBorderRadius);
+	height: 100vh;
+	max-width: 100%;
 	text-align: center;
 	width: 600px;
 }
 
-.woltlabNewsfeed.loaded .woltlabNewsfeed__loading {
+.woltlabNewsfeed .loading-indicator {
+	margin-top: 40px;
+}
+
+.woltlabNewsfeed:not(.woltlabNewsfeed--loading) .loading-indicator {
 	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;
+.woltlabNewsfeed--loading .woltlabNewsfeed__iframe {
+	visibility: hidden;
 }
diff --git a/wcfsetup/install/files/acp/templates/index.tpl b/wcfsetup/install/files/acp/templates/index.tpl
index b7b258e9f4..a4e09610ff 100644
--- a/wcfsetup/install/files/acp/templates/index.tpl
+++ b/wcfsetup/install/files/acp/templates/index.tpl
@@ -56,8 +56,8 @@
 	{if ENABLE_WOLTLAB_NEWS}
 		<div id="news" class="hidden tabMenuContent">
 			<div class="section">
-				<div class="woltlabNewsfeed">
-					<div class="woltlabNewsfeed__loading">{icon name='spinner' size=64}</div>
+				<div class="woltlabNewsfeed woltlabNewsfeed--loading">
+					<woltlab-core-loading-indicator size="48"></woltlab-core-loading-indicator>
 					<iframe
 						class="woltlabNewsfeed__iframe"
 						referrerpolicy="no-referrer"
@@ -69,17 +69,17 @@
 				{
 					const languageCode = "{if $__wcf->language->languageCode === 'de'}de{else}en{/if}";
 					let colorScheme = document.documentElement.dataset.colorScheme;
-					const container = document.querySelector('.woltlabNewsfeed');
+					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`;
+						container.classList.add("woltlabNewsfeed--loading");
 						iframe.addEventListener(
-							'load',
-							() => container.classList.add('loaded'),
+							"load",
+							() => container.classList.remove("woltlabNewsfeed--loading"),
 							{ once: true }
 						);
+						iframe.src = `https://newsfeed.woltlab.com/${ languageCode }_${ colorScheme }.html`;
 					};
 
 					const observer = new MutationObserver(() => {
-- 
2.20.1