refactor and optimize: now lazy rules are processed in chunks

src/services/style_setter/style_setter.js

@@ -4,6 +4,7 @@ import { init } from '../theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
+import { chunk } from 'lodash'
 
 export const applyTheme = async (input) => {
   let extraRules
@@ -43,15 +44,17 @@ export const applyTheme = async (input) => {
 
   body.classList.remove('hidden')
 
-  setTimeout(() => {
-    themes3.lazy().then(lazyRules => {
-      const t2 = performance.now()
-      getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
-        styleSheet.insertRule(rule, 'index-max')
+  // 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
+  // processed
+  chunk(themes3.lazy, 5).forEach(chunk => {
+    setTimeout(() => {
+      Promise.all(chunk.map(x => x())).then(result => {
+        getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+          styleSheet.insertRule(rule, 'index-max')
+        })
       })
-      const t3 = performance.now()
-      console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
-    })
+    }, 50)
   })
 
   return Promise.resolve()

src/services/theme_data/theme_data_3.service.js

@@ -148,10 +148,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
-
-  const eagerRules = []
-  const lazyRules = []
-  const lazyPromises = []
+  const rules = []
 
   const rulesetUnsorted = [
     ...Object.values(components)
@@ -188,11 +185,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
-  const processCombination = (combination, rules) => {
-    const addRule = (rule) => {
-      rules.push(rule)
-    }
-
+  const processCombination = (combination) => {
     const selector = ruleToSelector(combination, true)
     const cssSelector = ruleToSelector(combination)
 
@@ -377,12 +370,15 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         }
       })
 
-      addRule({
+      const rule = {
         dynamicVars,
         selector: cssSelector,
         ...combination,
         directives: computedDirectives
-      })
+      }
+
+      rules.push(rule)
+      return rule
     }
   }
 
@@ -449,22 +445,19 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   const t1 = performance.now()
   console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')
 
-  combinations.forEach((combination) => {
+  const result = combinations.map((combination) => {
     if (combination.lazy) {
-      lazyPromises.push(async () => processCombination(combination, lazyRules))
+      return async () => processCombination(combination)
     } else {
-      processCombination(combination, eagerRules)
+      return processCombination(combination)
     }
-  })
+  }).filter(x => x)
   const t2 = performance.now()
   console.debug('Eager processing took ' + (t2 - t1) + ' ms')
 
   return {
-    lazy: async () => {
-      await Promise.all(lazyPromises.map(x => x()))
-      return lazyRules
-    },
-    eager: eagerRules,
+    lazy: result.filter(x => typeof x === 'function'),
+    eager: result.filter(x => typeof x !== 'function'),
     staticVars
   }
 }