Improve the behavior on mobile, use the loading indicator component

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 0cb42d13771c204aac1010b5046f5a17742ba83d..16d97ba6aaa9ff165d4928104186fa9253c2d8ca 100644 (file)
--- 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 b7b258e9f4d5982778dd31b443f9a4a91dce2aae..a4e09610ff77a5c805661a4cbebbe40c3f324a7f 100644 (file)
--- 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(() => {