1 files changed, 44 insertions, 13 deletions
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 0a6b9428..95198ec7 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,7 +6,13 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
-export const applyTheme = async (input) => {
+export const generateTheme = async (input, callbacks) => {
+  const {
+    onNewRule = (rule, isLazy) => {},
+    onLazyFinished = () => {},
+    onEagerFinished = () => {}
+  } = callbacks
+
   let extraRules
   if (input.themeFileVersion === 1) {
     extraRules = convertTheme2To3(input)
@@ -17,11 +23,6 @@ export const applyTheme = async (input) => {
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
-  const body = document.body
-
-  const styleSheet = new CSSStyleSheet()
-  document.adoptedStyleSheets = [styleSheet]
-  body.classList.add('hidden')
 
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hacks to support multiple selectors on same component
@@ -37,13 +38,12 @@ export const applyTheme = async (input) => {
         parts[1],
         '}'
       ].join('')
-      styleSheet.insertRule(newRule, 'index-max')
+      onNewRule(newRule, false)
     } else {
-      styleSheet.insertRule(rule, 'index-max')
+      onNewRule(rule, false)
     }
   })
-
-  body.classList.remove('hidden')
+  onEagerFinished()
 
   // Optimization - instead of processing all lazy rules in one go, process them in small chunks
   // so that UI can do other things and be somewhat responsive while less important rules are being
@@ -61,13 +61,15 @@ export const applyTheme = async (input) => {
             parts[0],
             ', ',
             parts[0].replace(/\.modal-view/, '#modal'),
+            ', ',
+            parts[0].replace(/\.modal-view/, '.shout-panel'),
             ' {',
             parts[1],
             '}'
           ].join('')
-          styleSheet.insertRule(newRule, 'index-max')
+          onNewRule(newRule, true)
         } else {
-          styleSheet.insertRule(rule, 'index-max')
+          onNewRule(rule, true)
         }
       })
       // const t1 = performance.now()
@@ -76,10 +78,39 @@ export const applyTheme = async (input) => {
       counter += 1
       if (counter < chunks.length) {
         setTimeout(processChunk, 0)
+      } else {
+        onLazyFinished()
       }
     })
   }
-  setTimeout(processChunk, 0)
+
+  return { lazyProcessFunc: processChunk }
+}
+
+export const applyTheme = async (input) => {
+  const styleSheet = new CSSStyleSheet()
+  const lazyStyleSheet = new CSSStyleSheet()
+
+  const { lazyProcessFunc } = await generateTheme(
+    input,
+    {
+      onNewRule (rule, isLazy) {
+        if (isLazy) {
+          lazyStyleSheet.insertRule(rule, 'index-max')
+        } else {
+          styleSheet.insertRule(rule, 'index-max')
+        }
+      },
+      onEagerFinished () {
+        document.adoptedStyleSheets = [styleSheet]
+      },
+      onLazyFinished () {
+        document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+      }
+    }
+  )
+
+  setTimeout(lazyProcessFunc, 0)
 
   return Promise.resolve()
 }