Fix display of messages on mobile

Author: AchoArnold

web/pages/threads/_id.vue

@@ -64,7 +64,7 @@
         </v-menu>
       </v-app-bar>
       <v-progress-linear
-        v-if="$store.getters.getLoadingMessages"
+        v-if="loadingMessages"
         color="primary"
         indeterminate
       ></v-progress-linear>
@@ -74,12 +74,16 @@
           class="messages-body no-scrollbar"
           :class="{ 'pr-7': $vuetify.breakpoint.lgAndUp }"
         >
-          <v-row v-for="message in messages" :key="message.id">
+          <v-row
+            v-for="message in messages"
+            :key="message.id"
+            :style="{ visibility: messageVisibility }"
+          >
             <v-col
               class="d-flex"
               :class="{
                 'pr-12': $vuetify.breakpoint.mdAndDown && !isMT(message),
-                'pl-12 pr-5': $vuetify.breakpoint.mdAndDown && isMT(message),
+                'pl-12 pr-8': $vuetify.breakpoint.mdAndDown && isMT(message),
                 'pl-16 ml-16': $vuetify.breakpoint.lgAndUp && isMT(message),
                 'pr-16 mr-16': $vuetify.breakpoint.lgAndUp && !isMT(message),
               }"
@@ -265,6 +269,8 @@ export default Vue.extend({
       mdiCheckAll,
       mdiCheck,
       mdiAlert,
+      hideMessages: true,
+      loadingMessages: false,
       messages: [] as Message[],
       mdiPackageUp,
       mdiPackageDown,
@@ -285,6 +291,12 @@ export default Vue.extend({
     contactIsPhoneNumber(): boolean {
       return isValidPhoneNumber(this.$store.getters.getThread.contact)
     },
+    messageVisibility(): string {
+      if (this.hideMessages) {
+        return 'hidden'
+      }
+      return 'visible'
+    },
     contact(): string {
       return this.$store.getters.getThread.contact
     },
@@ -319,12 +331,21 @@ export default Vue.extend({
     },
 
     loadMessages() {
+      this.loadingMessages = true
       this.$store
         .dispatch('loadThreadMessages', this.$route.params.id)
         .then((messages: Array<Message>) => {
           this.messages = [...messages].reverse()
         })
-      this.scrollToElement()
+        .finally(() => {
+          setTimeout(() => {
+            this.loadingMessages = false
+          }, 750)
+        })
+      this.hideMessages = true
+      setTimeout(() => {
+        this.scrollToElement()
+      }, 500)
     },
 
     async loadData() {
@@ -333,8 +354,8 @@ export default Vue.extend({
 
       if (!this.$store.getters.hasThreadId(this.$route.params.id)) {
         await this.$router.push({ name: 'threads' })
-        this.loadMessages()
       }
+      this.loadMessages()
     },
 
     isMT(message: Message): boolean {
@@ -343,7 +364,10 @@ export default Vue.extend({
 
     scrollToElement() {
       const el: Element = this.$refs.messageBody as Element
-      el.scrollTop = el.scrollHeight + 120
+      if (el) {
+        el.scrollTop = el.scrollHeight + 120
+      }
+      this.hideMessages = false
     },
 
     archiveThread() {

web/store/index.ts

@@ -44,7 +44,6 @@ export type State = {
   owner: string | null
   axiosError: AxiosError | null
   loadingThreads: boolean
-  loadingMessages: boolean
   archivedThreads: boolean
   authStateChanged: boolean
   authUser: AuthUser | null
@@ -69,7 +68,6 @@ export const state = (): State => ({
   billingUsage: null,
   billingUsageHistory: [],
   archivedThreads: false,
-  loadingMessages: true,
   pooling: false,
   phones: [],
   user: null,
@@ -166,10 +164,6 @@ export const getters = {
     return state.loadingThreads
   },
 
-  getLoadingMessages(state: State): boolean {
-    return state.loadingMessages
-  },
-
   getThread(state: State): MessageThread {
     const thread = state.threads.find((x) => x.id === state.threadId)
     if (thread === undefined) {
@@ -249,7 +243,6 @@ export const mutations = {
   setOwner(state: State, payload: string) {
     state.owner = payload
     state.loadingThreads = true
-    state.loadingMessages = true
   },
 
   setArchivedThreads(state: State, payload: boolean) {