From 7eff9bdb383527ae24421bbbfa28d2cf15033f1a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 17 Oct 2023 14:34:50 +0300
Subject: [PATCH] Remove UI flicker

---
 app.vue             | 18 ------------------
 layouts/AppNews.vue | 20 +++++++++++++++++---
 layouts/default.vue |  2 +-
 pages/index.vue     |  2 +-
 plugins/appState.js |  2 +-
 5 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/app.vue b/app.vue
index 5517136da..ad2d11159 100644
--- a/app.vue
+++ b/app.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import News from '@/assets/data/news.json';
 import EventBus from '@/layouts/AppEventBus';
 
 export default {
@@ -22,21 +21,6 @@ export default {
         }
     },
     mounted() {
-        this.newsActivate = () => {
-            this.$appState.announcement = News;
-            const itemString = localStorage.getItem(this.$appState.storageKey);
-
-            if (itemString) {
-                const item = JSON.parse(itemString);
-
-                if (!item.hiddenNews || item.hiddenNews !== News.id) {
-                    this.$appState.newsActive = true;
-                } else this.$appState.newsActive = false;
-            } else {
-                this.$appState.newsActive = true;
-            }
-        };
-
         this.themeChangeListener = (event) => {
             this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
                 this.$appState.theme = event.theme;
@@ -46,11 +30,9 @@ export default {
         };
 
         EventBus.on('theme-change', this.themeChangeListener);
-        EventBus.on('news-activate', this.newsActivate);
     },
     beforeUnmount() {
         EventBus.off('theme-change', this.themeChangeListener);
-        EventBus.off('news-activate', this.newsActivate);
     }
 };
 </script>
diff --git a/layouts/AppNews.vue b/layouts/AppNews.vue
index e73db526f..530fe3499 100644
--- a/layouts/AppNews.vue
+++ b/layouts/AppNews.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-news" :style="$appState.announcement.backgroundStyle">
+    <div v-if="$appState.newsActive" class="layout-news" :style="$appState.announcement.backgroundStyle" >
         <div class="layout-news-container">
             <i></i>
             <div class="layout-news-content">
@@ -14,11 +14,25 @@
 </template>
 
 <script>
-import EventBus from '@/layouts/AppEventBus';
+import News from '@/assets/data/news.json';
 
 export default {
     mounted() {
-        EventBus.emit('news-activate');
+        const itemString = localStorage.getItem(this.$appState.storageKey);
+
+        if (itemString) {
+            const item = JSON.parse(itemString);
+
+            if (!item.hiddenNews || item.hiddenNews !== News.id) {
+                this.$appState.newsActive = true;
+                this.$appState.announcement = News;
+            } else {
+                this.$appState.newsActive = false;
+            }
+        } else {
+            this.$appState.announcement = News;
+            this.$appState.newsActive = true;
+        }
     },
     methods: {
         onClose() {
diff --git a/layouts/default.vue b/layouts/default.vue
index e19de5f1e..14f562aa7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
-        <AppNews v-if="$appState.newsActive" />
+        <AppNews />
         <AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" />
         <AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
         <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
diff --git a/pages/index.vue b/pages/index.vue
index 879b9801e..aff9363fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="landingClass">
-        <AppNews v-if="$appState.newsActive" />
+        <AppNews />
         <AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
         <HeroSection />
         <FeaturesSection />
diff --git a/plugins/appState.js b/plugins/appState.js
index 8ff3b9f64..19922f580 100644
--- a/plugins/appState.js
+++ b/plugins/appState.js
@@ -1,6 +1,6 @@
 const $appState = {
     install: (Vue, options) => {
-        Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: true, announcement: {}, storageKey: 'primevue' });
+        Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' });
     }
 };