only show interface after theme has been applied

5 files changed, 7 insertions, 5 deletions

diff --git a/src/App.vue b/src/App.vue
index fe214ce7..e12f919d 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 5b9bb456..bfb671ed 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 c7a2cad1..76269ece 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 f8d62d87..39242b9d 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 3c48bf89..e6724d60 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()