Fixes zammad#4876 - In mobile view the loading animation is not in th…

…e middle of the screen
cloucs · Oct 19, 2023 · f44427a · f44427a
1 parent d6135cf
commit f44427a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 14 deletions.
diff --git a/.cypress/support/component-index.html b/.cypress/support/component-index.html
@@ -7,6 +7,14 @@
     <link rel="stylesheet" href="/assets/mobile/fonts.css">
     <title>Zammad</title>
   </head>
+  <style>
+    body,
+    html,
+    #loading-app,
+    [data-cy-root] {
+      height: 100%;
+    }
+  </style>
   <body class="bg-black font-sans text-sm text-white antialiased">
     <div data-cy-root></div>
   </body>

diff --git a/app/frontend/apps/mobile/styles/main.scss b/app/frontend/apps/mobile/styles/main.scss
@@ -68,12 +68,6 @@
     --safe-bottom: env(safe-area-inset-bottom);
   }
 
-  html,
-  body,
-  #app {
-    height: 100%;
-  }
-
   [type='text'],
   [type='password'],
   [type='email'],

diff --git a/app/frontend/shared/router/index.ts b/app/frontend/shared/router/index.ts
@@ -10,6 +10,7 @@ import {
   type RouteRecordRaw,
 } from 'vue-router'
 import type { RouteRecordMeta } from '#shared/types/router.ts'
+import { useApplicationStore } from '#shared/stores/application.ts'
 import authenticationGuard from './guards/before/authentication.ts'
 import permissionGuard from './guards/before/permission.ts'
 import headerTitleGuard from './guards/after/headerTitle.ts'
@@ -32,6 +33,12 @@ export default function initializeRouter(
     routes,
   })
 
+  const removeInitializer = router.beforeResolve(() => {
+    const { setInitialized } = useApplicationStore()
+    setInitialized()
+    removeInitializer()
+  })
+
   router.beforeEach(authenticationGuard)
   router.beforeEach(permissionGuard)
 

diff --git a/app/frontend/shared/stores/application.ts b/app/frontend/shared/stores/application.ts
@@ -42,12 +42,13 @@ export const useApplicationStore = defineStore(
   'application',
   () => {
     const loading = computed(() => !loaded.value)
+    const initialized = ref(false)
 
     const setLoaded = (): void => {
-      const loadingAppElement: Maybe<HTMLElement> =
-        document.getElementById('loading-app')
-
       if (notifications.hasErrors()) {
+        const loadingAppElement: Maybe<HTMLElement> =
+          document.getElementById('loading-app')
+
         loadingAppElement
           ?.getElementsByClassName('loading-animation')
           .item(0)
@@ -70,10 +71,6 @@ export const useApplicationStore = defineStore(
 
       loaded.value = true
 
-      if (loadingAppElement) {
-        loadingAppElement.remove()
-      }
-
       testFlags.set('applicationLoaded.loaded')
     }
 
@@ -126,6 +123,20 @@ export const useApplicationStore = defineStore(
       ),
     )
 
+    // this is called right before router renders a page, - we remove "loading" element here instead of "setLoaded"
+    // so we don't have a short period when App route is not fetched yet and we see a black screen
+    const setInitialized = () => {
+      initialized.value = true
+
+      const appElement = document.getElementById('app')
+      if (appElement) {
+        appElement.dataset.loaded = 'true'
+      }
+
+      const loadingAppElement = document.getElementById('loading-app')
+      loadingAppElement?.remove()
+    }
+
     return {
       loaded,
       loading,
@@ -135,6 +146,8 @@ export const useApplicationStore = defineStore(
       getConfig,
       resetAndGetConfig,
       hasCustomProductBranding,
+      initialized,
+      setInitialized,
     }
   },
   {

diff --git a/app/views/mobile/index.html.erb b/app/views/mobile/index.html.erb
@@ -5,13 +5,18 @@
   border-style: solid;
   border-color: #656567;
 }
+body,
+html,
+#loading-app,
+#app[data-loaded="true"] {
+  height: 100%;
+}
 body {
   background-color: #191919;
   margin: 0;
 }
 #loading-app {
   display: flex;
-  height: 100vh;
 }
 .loading-animation {
   margin: 0 auto;