From 9806eea12ea4cde8b78741cfb1ddfe1d3e64ba9b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 22:52:12 +0300
Subject: [PATCH] only show interface after theme has been applied

---
 src/App.vue                               | 1 +
 src/boot/after_store.js                   | 1 +
 src/modules/instance.js                   | 1 +
 src/modules/interface.js                  | 4 ++++
 src/services/style_setter/style_setter.js | 5 -----
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fe214ce718..e12f919df1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
   <div
     id="app-loaded"
     :style="bgStyle"
+    v-show="$store.state.interface.themeApplied"
   >
     <div
       id="app_bg_wrapper"
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 5b9bb45637..bfb671edc5 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -363,6 +363,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
     } else {
       applyTheme(customTheme)
     }
+    store.commit('setThemeApplied')
   } else if (theme) {
     // do nothing, it will load asynchronously
   } else {
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c7a2cad1fd..76269eceae 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -386,6 +386,7 @@ const instance = {
           } else {
             applyTheme(themeData.theme)
           }
+          commit('setThemeApplied')
         })
     },
     fetchEmoji ({ dispatch, state }) {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index f8d62d87cc..39242b9d6b 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,4 +1,5 @@
 const defaultState = {
+  themeApplied: false,
   settingsModalState: 'hidden',
   settingsModalLoadedUser: false,
   settingsModalLoadedAdmin: false,
@@ -35,6 +36,9 @@ const interfaceMod = {
         state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
+    setThemeApplied (state) {
+      state.themeApplied = true
+    },
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3c48bf8919..e6724d60ad 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -88,9 +88,6 @@ export const generateTheme = async (input, callbacks) => {
 }
 
 export const applyTheme = async (input) => {
-  const body = document.body
-  body.classList.add('hidden')
-
   const styleSheet = new CSSStyleSheet()
   document.adoptedStyleSheets = [styleSheet]
 
@@ -103,8 +100,6 @@ export const applyTheme = async (input) => {
     }
   )
 
-  body.classList.remove('hidden')
-
   setTimeout(lazyProcessFunc, 0)
 
   return Promise.resolve()