Add initial loading-screen to index.html (#1825)

* add initial loading-screen to index.html * add loader animation to index.html * fix the linter error * completely remove the loading screen upon ready * revert back Loading.vue * fix the bug / destroy the loading animation upon LOGIN_ERROR * fix the linter errors in the comment * remove all console.log() for debugging
okTurtles · Feb 3, 2024 · 36b7b59 · 36b7b59
1 parent 7233a5c
commit 36b7b59
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 8 deletions.
diff --git a/frontend/assets/style/components/_loading.scss b/frontend/assets/style/components/_loading.scss
@@ -22,3 +22,39 @@
   50% { background-position: 100% 0; }
   100% { background-position: 100% 0; }
 }
+
+.main-loading-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  background-color: #ededed;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: #2e3032;
+  }
+
+  img {
+    display: inline-block;
+    width: 2.4rem;
+    height: auto;
+    transform-origin: center center;
+    animation: logo-rotation 5s linear infinite;
+
+    @include from ($tablet) {
+      width: 3rem;
+    }
+  }
+
+  @keyframes logo-rotation {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -11,6 +11,10 @@
     <link rel="icon" href="/assets/images/group-income-icon-transparent.png" sizes="32x32">
   </head>
   <body>
+    <div id="main-loading-screen" class="main-loading-screen">
+      <img src="/assets/images/group-income-icon-transparent.png" alt="logo" />
+    </div>
+
     <div class="modal is-active" id="fallback" style="display: none;">
       <div class="modal-content">
         <h1>Outdated browser</h1>

diff --git a/frontend/main.js b/frontend/main.js
@@ -13,7 +13,7 @@ import '~/shared/domains/chelonia/chelonia.js'
 import { CONTRACT_IS_SYNCING } from '~/shared/domains/chelonia/events.js'
 import { NOTIFICATION_TYPE, REQUEST_TYPE } from '../shared/pubsub.js'
 import * as Common from '@common/common.js'
-import { LOGIN, LOGOUT, SWITCH_GROUP, THEME_CHANGE, CHATROOM_USER_TYPING, CHATROOM_USER_STOP_TYPING } from './utils/events.js'
+import { LOGIN, LOGOUT, LOGIN_ERROR, SWITCH_GROUP, THEME_CHANGE, CHATROOM_USER_TYPING, CHATROOM_USER_STOP_TYPING } from './utils/events.js'
 import './controller/namespace.js'
 import './controller/actions/index.js'
 import './controller/backend.js'
@@ -260,7 +260,8 @@ async function startApp () {
           // TODO/REVIEW page can load with already loggedin. -> this.$store.state.loggedIn ? 'yes' : 'no'
           finishedLogin: 'no',
           debouncedSyncBanner: null,
-          isCorrupted: false // TODO #761
+          isCorrupted: false, // TODO #761
+          ready: false
         }
       }
     },
@@ -306,6 +307,10 @@ async function startApp () {
         sbp('gi.periodicNotifications/clearStatesAndStopTimers')
         sbp('chelonia.persistentActions/unload')
       })
+      sbp('okTurtles.events/once', LOGIN_ERROR, () => {
+        // Remove the loading animation that sits on top of the Vue app, so that users can properly interact with the app for a follow-up action.
+        this.removeLoadingAnimation()
+      })
       sbp('okTurtles.events/on', SWITCH_GROUP, () => {
         this.initOrResetPeriodicNotifications()
         this.checkAndEmitOneTimeNotifications()
@@ -374,7 +379,8 @@ async function startApp () {
       }).catch(e => {
         console.error(`[main] caught ${e?.name} while fetching settings or handling a login error: ${e?.message || e}`, e)
       }).finally(() => {
-        Vue.set(this.ephemeral, 'ready', true)
+        this.ephemeral.ready = true
+        this.removeLoadingAnimation()
       })
     },
     computed: {
@@ -407,6 +413,11 @@ async function startApp () {
       ]),
       setBadgeOnTab () {
         FaviconBadge.setBubble(this.shouldSetBadge)
+      },
+      removeLoadingAnimation () {
+        // remove the minimal loading animation in index.html
+        const loadingScreenEl = document.querySelector('#main-loading-screen')
+        loadingScreenEl && loadingScreenEl.remove()
       }
     },
     watch: {

diff --git a/frontend/views/containers/chatroom/SendArea.vue b/frontend/views/containers/chatroom/SendArea.vue
@@ -85,7 +85,6 @@
             button.is-icon(
               :aria-label='L("Bold style text")'
               @mousedown='transformTextSelectionToMarkdown($event, "bold")'
-              @click='onBtnClick'
             )
               i.icon-bold
           tooltip(
@@ -145,7 +144,6 @@
             button.is-icon(
               :aria-label='L("Bold style text")'
               @mousedown='transformTextSelectionToMarkdown($event, "bold")'
-              @click='onBtnClick'
             )
               i.icon-bold
           tooltip(
@@ -737,9 +735,6 @@ export default ({
       }).catch(e => {
         console.error('Error emitting user typing event', e)
       })
-    },
-    onBtnClick (e) {
-      e.preventDefault()
     }
   }
 }: Object)