optimization and refactoring, rules are first flattened and then

processed, letting us to set individual rules as "lazy"

1 files changed, 13 insertions, 13 deletions

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1cda7213..b1722295 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -5,23 +5,16 @@ import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
-export const applyTheme = (input) => {
+export const applyTheme = async (input) => {
   let extraRules
   if (input.themeType !== 1) {
-    const t0 = performance.now()
     const { theme } = generatePreset(input)
-    const t1 = performance.now()
-    console.debug('Themes 2 initialization took ' + (t1 - t0) + 'ms')
     extraRules = convertTheme2To3(theme)
   } else {
-    console.debug(input)
     extraRules = convertTheme2To3(input)
   }
 
-  const t1 = performance.now()
   const themes3 = init(extraRules, '#FFFFFF')
-  const t2 = performance.now()
-  console.debug('Themes 3 (eager) initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -47,14 +40,21 @@ export const applyTheme = (input) => {
       styleSheet.insertRule(rule, 'index-max')
     }
   })
+
   body.classList.remove('hidden')
-  themes3.lazy.then(lazyRules => {
-    getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
-      styleSheet.insertRule(rule, 'index-max')
+
+  setTimeout(() => {
+    themes3.lazy().then(lazyRules => {
+      const t2 = performance.now()
+      getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
+        styleSheet.insertRule(rule, 'index-max')
+      })
+      const t3 = performance.now()
+      console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
     })
-    const t3 = performance.now()
-    console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
   })
+
+  return Promise.resolve()
 }
 
 const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>