commit: 3cc9afc15fc123bf3d8a869b237645eace2cafe3
parent 179fb9e5272671cf93cab7f139a70945bc021a55
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Dec 2024 15:42:03 +0200
remove useless strings, hide loader on eager finish
Diffstat:
5 files changed, 109 insertions(+), 103 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
- }
- })
- break
- case 'input':
- hacks.push({
- component: 'Input',
- directives: {
- '--font': 'generic | ' + font.family
- }
- })
- break
- case 'post':
- hacks.push({
- component: 'RichContent',
- 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 '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
+ 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)
}
- hacks.push(newRule)
+ break
}
- break
}
- }
- })
+ })
- const rulesetArray = [
- theme2ruleset,
- state.styleDataUsed,
- paletteIss,
- hacks
- ].filter(x => x)
-
- return applyTheme(
- rulesetArray.flat(),
- () => commit('setThemeApplied'),
- themeDebug
- )
+ const rulesetArray = [
+ theme2ruleset,
+ state.styleDataUsed,
+ paletteIss,
+ hacks
+ ].filter(x => x)
+
+ 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
@@ -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])
