Merge branch 'loader-fixes' into 'develop'

Loader fixes

See merge request pleroma/pleroma-fe!1954

index.html

@@ -70,6 +70,8 @@
                             "P P . . ."
                             "P P . E E"
                             "P P . E E";
+
+       --logoChunkSize: calc(2em * 0.5 * var(--scale))
      }
 
      .chunk {
@@ -99,6 +101,27 @@
        text-align: center;
      }
 
+     #statusError {
+       display: none;
+       margin-top: 1em;
+       font-size: calc(1vw + 1vh + 1vmin);
+       line-height: 2;
+       width: 100%;
+       text-align: center;
+     }
+
+     #statusStack {
+       display: none;
+       margin-top: 1em;
+       font-size: calc((1vw + 1vh + 1vmin) / 2.5);
+       width: calc(100vw - 5em);
+       padding: 1em;
+       text-overflow: ellipsis;
+       overflow-x: hidden;
+       text-align: left;
+       line-height: 2;
+     }
+
      @media (prefers-reduced-motion) {
        #throbber {
          animation: none !important;
@@ -133,6 +156,8 @@
           <!-- it's a pseudographic, don't want screenreader read out nonsense -->
           <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
         </div>
+        <code id="statusError"></code>
+        <pre id="statusStack"></pre>
       </div>
     </div>
     <div id="app" class="hidden"></div>

src/boot/after_store.js

@@ -349,12 +349,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)
   }
 
@@ -362,7 +361,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 }),
@@ -409,7 +407,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

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...",

src/main.js

@@ -68,6 +68,17 @@ const persistedStateOptions = {
     throbber.classList.add('dead')
     document.querySelector('#status').textContent = i18n.global.t('splash.error')
     console.error('PleromaFE failed to initialize: ', e)
+    document.querySelector('#statusError').textContent = e
+    document.querySelector('#statusStack').textContent = e.stack
+    document.querySelector('#statusError').style = 'display: block'
+    document.querySelector('#statusStack').style = 'display: block'
+  }
+
+  window.splashError = e => splashError(i18n, e)
+  window.splashUpdate = key => {
+    if (document.querySelector('#status')) {
+      document.querySelector('#status').textContent = i18n.global.t(key)
+    }
   }
 
   try {

src/modules/interface.js

@@ -563,8 +563,10 @@ const interfaceMod = {
       if (!forceRecompile && !themeDebug && await tryLoadCache()) {
         return commit('setThemeApplied')
       }
+      window.splashUpdate('splash.theme')
       await dispatch('getThemeData')
 
+      try {
         const paletteIss = (() => {
           if (!state.paletteDataUsed) return null
           const result = {
@@ -667,8 +669,12 @@ const interfaceMod = {
         return applyTheme(
           rulesetArray.flat(),
           () => commit('setThemeApplied'),
+          () => {},
           themeDebug
         )
+      } catch (e) {
+        window.splashError(e)
+      }
     }
   }
 }

src/services/style_setter/style_setter.js

@@ -118,7 +118,12 @@ 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 +153,7 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => {
       },
       onEagerFinished () {
         adoptStyleSheets([eagerStyles])
+        onEagerFinish()
       },
       onLazyFinished () {
         adoptStyleSheets([eagerStyles, lazyStyles])