hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

optimization and refactoring, rules are first flattened and then

Browse source 
processed, letting us to set individual rules as "lazy"
This commit is contained in:
Henry Jameson 2024-02-26 21:37:40 +02:00
commit dc22386599
3 changed files with 243 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/services/style_setter/style_setter.js
View file

@ -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 }) =>