From 3cc9afc15fc123bf3d8a869b237645eace2cafe3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 12 Dec 2024 15:42:03 +0200 Subject: [PATCH] remove useless strings, hide loader on eager finish --- src/boot/after_store.js | 5 +- src/i18n/en.json | 3 - src/main.js | 5 + src/modules/interface.js | 196 +++++++++++----------- src/services/style_setter/style_setter.js | 3 +- 5 files changed, 109 insertions(+), 103 deletions(-) diff --git a/src/boot/after_store.js b/src/boot/after_store.js index fec96580..6153608e 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -348,12 +348,11 @@ const afterStoreSetup = async ({ store, i18n }) => { const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin store.dispatch('setInstanceOption', { name: 'server', value: server }) - document.querySelector('#status').textContent = i18n.global.t('splash.settings') await setConfig({ store }) - document.querySelector('#status').textContent = i18n.global.t('splash.theme') try { await store.dispatch('applyTheme').catch((e) => { console.error('Error setting theme', e) }) } catch (e) { + window.splashError(e) return Promise.reject(e) } @@ -361,7 +360,6 @@ const afterStoreSetup = async ({ store, i18n }) => { // Now we can try getting the server settings and logging in // Most of these are preloaded into the index.html so blocking is minimized - document.querySelector('#status').textContent = i18n.global.t('splash.instance') await Promise.all([ checkOAuthToken({ store }), getInstancePanel({ store }), @@ -408,7 +406,6 @@ const afterStoreSetup = async ({ store, i18n }) => { // remove after vue 3.3 app.config.unwrapInjectedRef = true - document.querySelector('#status').textContent = i18n.global.t('splash.almost') app.mount('#app') return app diff --git a/src/i18n/en.json b/src/i18n/en.json index 7febbf9f..5ec6b731 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -1494,9 +1494,6 @@ "splash": { "loading": "Loading...", "theme": "Applying theme, please wait warmly...", - "instance": "Getting instance info...", - "settings": "Applying settings...", - "almost": "Reticulating splines...", "fun_1": "Drink more water", "fun_2": "Take it easy!", "fun_3": "Suya...", diff --git a/src/main.js b/src/main.js index bcfc80b0..772bc8db 100644 --- a/src/main.js +++ b/src/main.js @@ -70,6 +70,11 @@ const persistedStateOptions = { console.error('PleromaFE failed to initialize: ', e) } + window.splashError = e => splashError(i18n, e) + window.splashUpdate = key => { + document.querySelector('#status').textContent = i18n.global.t(key) + } + try { let storageError const plugins = [pushNotifications] diff --git a/src/modules/interface.js b/src/modules/interface.js index 442b482a..cd06e429 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -563,112 +563,118 @@ const interfaceMod = { if (!forceRecompile && !themeDebug && await tryLoadCache()) { return commit('setThemeApplied') } + window.splashUpdate('splash.theme') await dispatch('getThemeData') - const paletteIss = (() => { - if (!state.paletteDataUsed) return null - const result = { - component: 'Root', - directives: {} - } + try { + const paletteIss = (() => { + if (!state.paletteDataUsed) return null + const result = { + component: 'Root', + directives: {} + } - Object - .entries(state.paletteDataUsed) - .filter(([k]) => k !== 'name') - .forEach(([k, v]) => { - let issRootDirectiveName - switch (k) { - case 'background': - issRootDirectiveName = 'bg' - break - case 'foreground': - issRootDirectiveName = 'fg' - break - default: - issRootDirectiveName = k - } - result.directives['--' + issRootDirectiveName] = 'color | ' + v - }) - return result - })() - - const theme2ruleset = state.themeDataUsed && convertTheme2To3(normalizeThemeData(state.themeDataUsed)) - const hacks = [] - - Object.entries(theme3hacks).forEach(([key, value]) => { - switch (key) { - case 'fonts': { - Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => { - if (!font?.family) return - switch (fontKey) { - case 'interface': - hacks.push({ - component: 'Root', - directives: { - '--font': 'generic | ' + font.family - } - }) + Object + .entries(state.paletteDataUsed) + .filter(([k]) => k !== 'name') + .forEach(([k, v]) => { + let issRootDirectiveName + switch (k) { + case 'background': + issRootDirectiveName = 'bg' break - case 'input': - hacks.push({ - component: 'Input', - directives: { - '--font': 'generic | ' + font.family - } - }) - break - case 'post': - hacks.push({ - component: 'RichContent', - directives: { - '--font': 'generic | ' + font.family - } - }) - break - case 'monospace': - hacks.push({ - component: 'Root', - directives: { - '--monoFont': 'generic | ' + font.family - } - }) + case 'foreground': + issRootDirectiveName = 'fg' break + default: + issRootDirectiveName = k } + result.directives['--' + issRootDirectiveName] = 'color | ' + v }) - break - } - case 'underlay': { - if (value !== 'none') { - const newRule = { - component: 'Underlay', - directives: {} - } - if (value === 'opaque') { - newRule.directives.opacity = 1 - newRule.directives.background = '--wallpaper' - } - if (value === 'transparent') { - newRule.directives.opacity = 0 - } - hacks.push(newRule) + return result + })() + + const theme2ruleset = state.themeDataUsed && convertTheme2To3(normalizeThemeData(state.themeDataUsed)) + const hacks = [] + + Object.entries(theme3hacks).forEach(([key, value]) => { + switch (key) { + case 'fonts': { + Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => { + if (!font?.family) return + switch (fontKey) { + case 'interface': + hacks.push({ + component: 'Root', + directives: { + '--font': 'generic | ' + font.family + } + }) + break + case 'input': + hacks.push({ + component: 'Input', + directives: { + '--font': 'generic | ' + font.family + } + }) + break + case 'post': + hacks.push({ + component: 'RichContent', + directives: { + '--font': 'generic | ' + font.family + } + }) + break + case 'monospace': + hacks.push({ + component: 'Root', + directives: { + '--monoFont': 'generic | ' + font.family + } + }) + break + } + }) + break + } + case 'underlay': { + if (value !== 'none') { + const newRule = { + component: 'Underlay', + directives: {} + } + if (value === 'opaque') { + newRule.directives.opacity = 1 + newRule.directives.background = '--wallpaper' + } + if (value === 'transparent') { + newRule.directives.opacity = 0 + } + hacks.push(newRule) + } + break } - break } - } - }) + }) - const rulesetArray = [ - theme2ruleset, - state.styleDataUsed, - paletteIss, - hacks - ].filter(x => x) + const rulesetArray = [ + theme2ruleset, + state.styleDataUsed, + paletteIss, + hacks + ].filter(x => x) - return applyTheme( - rulesetArray.flat(), - () => commit('setThemeApplied'), - themeDebug - ) + return applyTheme( + rulesetArray.flat(), + () => commit('setThemeApplied'), + () => {}, + themeDebug + ) + } catch (e) { + window.splashError(e) + } } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index b5014ff1..d0a0ee08 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -118,7 +118,7 @@ export const tryLoadCache = async () => { } } -export const applyTheme = (input, onFinish = (data) => {}, debug) => { +export const applyTheme = (input, onEagerFinish = data => {}, onFinish = data => {}, debug) => { const eagerStyles = createStyleSheet(EAGER_STYLE_ID) const lazyStyles = createStyleSheet(LAZY_STYLE_ID) @@ -148,6 +148,7 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => { }, onEagerFinished () { adoptStyleSheets([eagerStyles]) + onEagerFinish() }, onLazyFinished () { adoptStyleSheets([eagerStyles, lazyStyles])